3D Model Viewer

The viewer renders models in a real WebGL viewport built on Three.js. On mount it creates a Scene with a PerspectiveCamera (50 degree field of view, near plane 0.1, far plane 1000), a WebGLRenderer with antialiasing and pixel ratio capped at 2, and PCFSoftShadowMap soft shadows. Navigation uses OrbitControls with damping (factor 0.05): drag to orbit, scroll to zoom, and right-drag to pan. When you upload a file it is read entirely in the browser as an ArrayBuffer and dispatched to a Three.js loader by extension. GLB and GLTF go through GLTFLoader, which embeds geometry, PBR materials, textures, and animation in a single file, so these load fully shaded. OBJ is parsed by OBJLoader directly from the file text via TextDecoder, which means no sibling .mtl or external texture files are fetched, so OBJ meshes that lack a material (or carry only a MeshBasicMaterial) are assigned a default gray MeshStandardMaterial (color 0x888888, metalness 0.2, roughness 0.6). STL is loaded by STLLoader as geometry only and wrapped in a Mesh with that same flat gray material, which is the correct, expected look for a 3D-print preview since STL carries no color, UVs, or materials. FBX is parsed by FBXLoader.

After loading, every mesh is normalized for consistent framing regardless of the model's original units. Missing vertex normals are recomputed with computeVertexNormals() so lighting renders correctly, the model is wrapped in a Group, centered on its bounding-box center, and uniformly scaled so its largest dimension becomes about 2 world units. The camera is then repositioned to finalMaxDim x 2.5 to frame the result. The side panel reports live mesh statistics computed from the geometry: vertex count from the position attribute, and face count derived from the index buffer length divided by 3 (or the position count divided by 3 for non-indexed geometry), alongside the detected format and file size. A Reset button returns the camera to its starting position, and a Screenshot button exports the current viewport as a PNG via the canvas toDataURL.

Four lighting presets change the scene's light rig rather than just brightness. 'Studio' uses a four-point setup: a 0.4-intensity ambient light plus a full-intensity key DirectionalLight casting shadows, a 0.3 fill, and a 0.2 back light. 'Outdoor' uses a HemisphereLight (sky-blue 0x87ceeb over grass-green 0x90ee90) and a warm shadow-casting sun. 'Dark' uses a dim ambient plus a single PointLight with falloff, and 'Flat' uses only a full-intensity ambient for shadow-free, even illumination. A wireframe toggle switches every mesh material to wireframe for topology inspection, and a configurable GridHelper (10 units, 20 divisions) and AxesHelper (length 2) can be shown or hidden. The background color, wireframe state, grid, axes, auto-rotate, and lighting preset are all stored in the URL via useUrlStates, so a configured view can be shared as a link with the Share Config button.