Macbook Pro Store

Why a 3D Store?

Standard product pages often fail to convey the physical elegance of premium hardware. By integrating a real-time 3D environment, this project allows users to inspect the MacBook Pro from every angle, offering a level of engagement that static images simply cannot match. It bridges the gap between digital browsing and physical retail.

This project was a deep dive into WebGL performance, focusing on how to render high-fidelity models without compromising load times or scroll smoothness on lower-end devices.

Technical Architecture

I designed the architecture to handle heavy graphical computation while maintaining a fluid UI:

• 3D Engine: React Three Fiber (R3F) and Drei for declarative Three.js scenes
• Animations: GSAP (GreenSock) for precise, scroll-triggered camera movements and timeline control
• State Management: Zustand for handling color configuration and camera states without prop drilling
• Styling: Tailwind CSS for the UI overlay and responsive layout adjustments
• Performance: Draco compression for 3D assets and lazy loading for non-critical textures

The core challenge was synchronizing the DOM (HTML overlay) with the WebGL canvas. I implemented a custom coordinate system to ensure text elements scroll in perfect harmony with the 3D model's rotation and transformation.

Core Features

Scroll-Driven Animation: As users scroll, the MacBook Pro smoothly rotates, opens, and disassembles to reveal internal components. This "scrollytelling" approach guides the user through the product story at their own pace.

Interactive Configurator: Users can toggle between different finishes (Space Gray, Silver) in real-time. The material shaders update instantly, preserving realistic lighting and reflections without reloading the model.

Dynamic Lighting: The scene utilizes physically based rendering (PBR) with environment maps to create realistic reflections on the aluminum chassis, shifting dynamically as the user rotates the view.

Design and User Experience

Inspired by Apple's minimalist aesthetic, the UI is designed to recede, letting the product take center stage. Typography is crisp and spacious, using large headers to punctuate the visual journey. The "Buy Now" and configuration UI elements use glassmorphism effects to float above the 3D scene without obstructing it.

Technical Challenges and Solutions

Model Optimization: The initial CAD model was too heavy for web use. I used Blender to retopologize the mesh and bake high-resolution textures, reducing the file size by 90% while maintaining visual fidelity using Draco compression.

Canvas Responsiveness: 3D scenes often break on mobile screens. I implemented a dynamic camera rig that adjusts the field of view (FOV) and model position based on the viewport width, ensuring the MacBook looks perfect on both mobile phones and ultrawide monitors.

Key Learning Outcomes

Building this 3D experience refined my skills in creative engineering:

• WebGL Proficiency: Understanding shaders, lighting models, and the 3D rendering pipeline
• Performance Tuning: Mastering the use of `useFrame` loops and avoiding layout thrashing in 3D scenes
• Creative Coding: Learning to blend mathematical precision with artistic timing to create "delightful" interactions