🏎️ Professional 3D Car Showcase

React Three.js Tailwind

Live Demo: showcase.anitacreativestudio.com

An immersive, high-fidelity 3D car exhibition platform. This project demonstrates advanced capabilities in Three.js and React Three Fiber, focusing on realistic vehicle rendering, environment orchestration, and seamless camera transitions between multiple 3D scenes.

This application serves as a technical demonstration of modern 3D web development:

• High-Fidelity Vehicle Rendering: Optimized loading and material application for complex GLB/GLTF car models (Tesla Model 3, Semi, and Cybertruck).
• Cinematic Transitions: Implementation of smooth, state-driven camera movements that transition the user through distinct environmental "stages."
• Advanced Post-Processing: Utilizes @react-three/postprocessing to implement Bloom, SSR (Screen Space Reflections), and Depth of Field for a realistic automotive showroom feel.
• Environment Logic: A modular system for swapping HDRIs, lighting setups, and ground reflections dynamically using Jotai state.

• Graphics Core: Three.js / React Three Fiber (R3F) – Scene management, PBR materials, and real-time shadows.
• Helpers: @react-three/drei – Camera controls, environment presets, and model optimization.
• Debugging: Leva – Real-time GUI for fine-tuning lighting and post-processing variables.
• State Management: Jotai – Atomic state for handling active scene indices and transition triggers.
• Styling: Tailwind CSS – Responsive overlay UI for navigation and vehicle stats.

To review the project code and run it locally:

1. Clone: git clone https://github.com/digitalfairy/3D-Car-Showcase.git
2. Install: npm install
3. Run Dev Server: npm run dev
4. Visit: http://localhost:5173

This project features high-quality assets from the 3D community, used under CC-BY licensing.

Huge thanks for the 3D models to:

Cactus by Poly by Google CC-BY via Poly Pizza (https://poly.pizza/m/9UCcl_W0Xq3) Picnic Table by J-Toastie CC-BY via Poly Pizza (https://poly.pizza/m/GQieALI2C4) Kayak by Poly by Google CC-BY via Poly Pizza (https://poly.pizza/m/8d-cgFdVEVN) Cybertruck by Hashikemu https://market.pmnd.rs/creator/hashikemu https://market.pmnd.rs/model/cybertruck Three way traffic light by Poly by Google CC-BY via Poly Pizza (https://poly.pizza/m/ayAwgj82oUR) Tires by Quaternius (https://poly.pizza/m/mmq7GmG1AK) Wall desk speakers by Poly by Google CC-BY via Poly Pizza (https://poly.pizza/m/fhFGDsv5jje) Cargo Train Container by Quaternius (https://poly.pizza/m/AILdezfcv1) Cone by J-Toastie CC-BY via Poly Pizza (https://poly.pizza/m/WoXpAJT0oD) Concrete Barrier by J-Toastie CC-BY via Poly Pizza (https://poly.pizza/m/5Cg2oW7EFn) Tesla Model 3 Author: David_Holiday (https://sketchfab.com/David_Holiday) License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) Source: https://sketchfab.com/3d-models/tesla-model-3-123c10f376ec4f18b93c73afc382808b Tesla Semi: Author: Aleksei Rozumnyi (https://sketchfab.com/Aleksei.Rozumnyi) License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) Source: https://sketchfab.com/3d-models/tesla-semi-39ffc7c746184e0c9ebd5bbcd0b405dd

Portfolio: anitacreativestudio.com
Email: jelicanita7@gmail.com