How Three.js Works
Three.js is a JavaScript library for putting interactive 3D graphics on a web page. In the takeoff workflow I built with Astra, it is the part that turns the model data into a scene I can move around and inspect.
The pieces of a scene
A scene contains objects. A camera defines the view. A mesh combines geometry, such as the shape of a footing, with a material that controls its appearance. The renderer draws the camera's view into a canvas on the page. Three.js manages these objects and their transforms; the renderer used in this project uses WebGL to draw them. See the Three.js fundamentals.
What that means on a construction job
Imagine a footing record with a location, width, length, depth, and sheet reference. The application creates a mesh with those dimensions and puts it at that location. A group can collect footings for one building zone. A layer can collect concrete, utilities, or duct banks.
In this morning's viewer, those relationships drive scope filters, construction stages, source-sheet links, and quantity panels. Each object carries metadata so a selection can lead back to the corresponding element record.
The math should come from the dimensional records. Making a mesh translucent or hiding a layer changes the view; it should change a quantity total only when the user explicitly requests a filtered subtotal.
Moving, selecting, and looking inside
OrbitControls provides camera orbit, zoom, and pan. A Raycaster can find the objects under the pointer. Application code uses those hits to select an element or measure between picked surfaces. In the takeoff viewer, a cut plane also lets me look inside the model.
These interactions make a quantity review easier to follow. Select a footing, see which scope it belongs to, check its dimensions, and open its source. The viewer makes that chain visible.
HTML is the home for the viewer
HTML provides the page, CSS styles the controls, and JavaScript runs the interface and scene. This project bundles its viewer into an HTML file. A local web server serves it on my computer; a hosted copy can make the same interface accessible to a team when its supporting files are included.
A localhost address points to the reader's own computer. Sharing that address does not share the model. Distributing the viewer package or hosting it at an accessible address is a separate step.
What Three.js does not supply by itself
Three.js does not interpret construction specifications, infer the correct scope, or establish whether an elevation is supported by a drawing. The Python pipeline and application logic prepare the data; the estimator checks it. Three.js makes the result visible and interactive.
It can also hand the scene to GLTFExporter. The GLB explainer covers what leaves the viewer and what needs to travel separately.