CabinetViewer 3D
Parametric 3D furniture visualizer, custom Web Component architecture, and real-time WebGL rendering
Three.js
WebGL
JavaScript
HTML5 Canvas
CSS3 Grid// Interactive 3D WebGL Configurator
Project Overview
CabinetViewer 3D is a modular, interactive 3D web application designed for parametric cabinet visualization and real-time configuration.
Built using Three.js and custom JavaScript components without heavy UI framework overhead, the application allows users to manipulate dimensions, swap materials, adjust shelf distributions, and animate doors with immediate 60 FPS viewport feedback.
System Architecture
The application is structured into decoupled components communicating over a centralized event bus:
| Component | Responsibility | Technical Implementation |
|---|---|---|
| Viewport Controller | Scene & Camera Management | Three.js WebGLRenderer, PerspectiveCamera, and smooth OrbitControls with damping |
| Parametric Mesh Generator | Dynamic 3D Geometry | Computes vertex buffers on the fly when dimension sliders change, avoiding pre-modeled 3D asset downloads |
| Hinge & Animation System | Door Pivot Kinematics | Raycasts mouse clicks onto door meshes and applies trigonometric rotation around offset pivot axes |
| Material & Shader Pipeline | Surface Appearance | Configures PBR materials (roughness, metalness, normal maps) for wood veneers, laminates, and brushed metals |
| Draggable UI Widget | Floating Control Panel | Custom HTML5 draggable panel with real-time sliders, color pickers, and preset buttons |
| Configuration Exporter | State Persistence | Serializes active dimensional parameters and material states into JSON for export and localStorage caching |
Technical Implementation Details
1. Parametric geometry generation
Rather than loading static .gltf or .obj models, CabinetViewer generates its geometry programmatically:
- Dynamic calculation of vertex buffer positions for side panels, top/bottom shelves, and backing boards based on numerical width, height, and depth inputs.
- Recalculates UV texture coordinates automatically when dimensions stretch to prevent texture distortion on wood grain surfaces.
- Dynamic shelf positioning distributing horizontal dividers equally along the Y-axis.
2. Animated door pivot mechanics
Standard Three.js object rotation occurs around the center of mass. To achieve realistic door swings:
- Creates an invisible parent anchor object offset to the hinge edge of the cabinet frame.
- Mounts the door mesh as a child of the hinge anchor.
- Uses
requestAnimationFrameinterpolation to smoothly rotate the hinge anchor from 0 to 110 degrees upon raycast selection.
3. Modular ES6 Web Component architecture
The control panel and configuration widgets are encapsulated into standalone custom components. An event bus handles communication between the UI controls and the WebGL scene manager, keeping the rendering loop decoupled from DOM manipulation.
4. Physically based material rendering (PBR)
The scene utilizes Three.js MeshStandardMaterial combined with ambient lighting and a key directional light casting soft shadow maps. Material presets allow instantaneous swapping between oak wood, walnut, matte white laminate, and anodized aluminum handles.