Abiy Hailu LogoAbiy Hailu Logo
< 3D Graphics & Web Development / >

AB ToyVerse - Interactive 3D Product Viewer

Back
//
npm run case_study

An interactive 3D product viewer application that showcases a collection of toys created entirely from basic geometric shapes using Three.js. Demonstrates foundational 3D web development concepts with modern user interface design and smooth animations.

3D Product Showcase

Created 6 unique toys built from basic geometric shapes including Robot, Teddy Bear, Rocket, Car, Dino Bot, and House. Each toy features interactive parts with visual feedback, realistic materials, and detailed components demonstrating mastery of Three.js fundamentals. Try the interactive demo at https://ab-toyverse.vercel.app/.

Interactive Features

Implemented real-time camera controls with orbit, zoom, and pan functionality. Features mouse interaction with raycasting for click detection, automatic camera animation with smooth orbital rotation, product filtering by likes and bookmarks, and dark/light mode toggle.

Technical Excellence

Built with Three.js r128 featuring WebGL renderer, OrbitControls for camera manipulation, raycasting for precise mouse interaction, MaterialStandardMaterial for realistic lighting, dynamic shadows with PCF soft shadow mapping, and performance optimization for 60fps animation.