For this project, I built a fullscreen, responsive 3D scene using Three.js to present a soda bottle in an interactive way. The 3D model was sourced from Sketchfab, and I handled the entire interaction layer and scene setup myself.
The bottle is loaded as a GLB file with the GLTFLoader and centered in the scene using Box3, so it stays properly aligned regardless of screen size. The scene includes multiple lights (a directional key light with shadows, plus fill and rim lights) to give the product depth and dimension, and I configured shadow casting and receiving on the model and the ground plane for a more realistic look.
For camera interaction, I used OrbitControls with restricted vertical and horizontal rotation, so the user can only orbit the product within a controlled range instead of spinning it freely. The core interactive feature is raycasting: specific parts of the bottle's mesh respond to hover and click, with GSAP-animated highlights, scaling, background color transitions, and an info modal.
Curious about the flavors? Try hovering over the bottle to find out.
Final project