3dArts: Kreativ Saharaa 3D & Animation Portfolio
What Is 3dArts?
3dArts is a highly interactive portfolio project designed to showcase 3D modeling, character animation (authored in Autodesk Maya), and WebGL engineering. It serves as a digital playground that combines professional 3D artistry with modern web engineering to deliver a premium "wow" experience.
The flagship feature of this repository is the /playground route, which renders a fully realized 3D garage environment featuring a Porsche 911 GLB model directly in the browser.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 18 + Vite 5 |
| 3D Engine | Three.js (v0.167) + OrbitControls |
| Styling | Tailwind CSS 3 |
| Animations | Framer Motion 12 |
| Assets | Autodesk Maya (Exported to GLB) |
Architecture & Features
The project is structured to heavily separate the React UI layer from the WebGL/Three.js rendering pipeline, ensuring smooth frame rates and maintainable code.
Modular WebGL Pipeline
The Three.js scene is procedural and highly modular:
buildGarage.js&buildLighting.js: Procedurally constructs the environment and physically-based lighting rigs.lightingEffects.js: Drives an animated neon accent glow that pulses on every frame.loadPorscheModel.js: Handles asynchronous loading of heavy GLB assets (like the ~11MB Porsche 911 model).- Cinematic Quality: Utilizes
ACESFilmictone-mapping,PCFSoftshadow maps, andFogExp2atmospheric depth for a photorealistic look.
Framer Motion UI Layer
The standard HTML UI is bridged seamlessly with the 3D space using Framer Motion. This includes custom text effects like a "Typewriter Cursor" reveal and a "Laser Typewriter" stagger-scan animation for the hero subtitle, alongside scroll-triggered card reveals.
What I Learned / Engineering Decisions
One of the most complex aspects of building real-time 3D web experiences is memory management and the React lifecycle. The useGarageScene.js custom hook acts as the orchestrator for the WebGL scene. It wires up the animation loop and handles resize logic, but more importantly, it ensures a full teardown on unmount. Disposing of geometries, materials, and canceling the requestAnimationFrame loop prevents massive memory leaks when navigating away from the 3D playground.
Additionally, authoring the assets in Autodesk Maya and exporting them to GLB allowed for preserving the intricate PBR (Physically Based Rendering) materials and geometry detail while keeping file sizes optimized for the web.