3D Utility
Package Fit Visualizer
A Three.js package-fit visualizer with GLB upload, drag-to-position boxes, dimension controls, selection outlines, and camera presets.
Employer signal
What This Project Shows
This project shows 3D frontend implementation for a practical spatial problem: checking whether physical objects and packaging constraints make sense visually.
Problem
What Needed To Be Solved
Packaging decisions are error-prone when the only data is length, width, height, and a rough mental image. A visual comparison catches orientation and clearance problems earlier.
Approach
How I Built The Solution
I built a single-file 3D scene where package boxes are real meshes, dimensions are editable, and uploaded GLB models can be scaled, centered, and compared against the package space.
Outcome
What It Demonstrates
The project demonstrates 3D UI fundamentals, model upload workflows, and careful handling of browser graphics resources.
Evidence From Source
Source signal
The tool uses `THREE.GLTFLoader`, `BoxGeometry`, `BoxHelper`, `Raycaster`, a drag plane, and explicit material disposal when models are cleared.
Product signal
The controls stay close to the scene, which makes it useful as a decision tool rather than a static 3D preview.