/r3f_walkthrough

You're working on a project that renders 3D models using Three.js and React Three Fiber, incorporating GLTF models with dynamic lighting and shadows. The UI is built using React.js and TailwindCSS, with mobile responsiveness in mind. The project includes animations and camera controls for an interactive 3D experience.

Primary LanguageJavaScript

ASHABB logo

ASHABB Tesla Car walkthrough - React Three Fiber

This project utilizes Next.js and React Three Fiber to render and interact with 3D models on the web. The application features smooth scroll-based animations using ScrollControls and OrbitControls, making it responsive across devices. The 3D models are loaded using GLTF, and the UI is styled with TailwindCSS. Deployed on Vercel, the project showcases modern frontend development techniques with an emphasis on performance, responsiveness, and user interaction.

Resource links

webapp : https://ashabb-tesla.vercel.app

Github : https://github.com/ashgole/r3f_walkthrough

Tags

Next.js, TailwindCSS, React, Stock Management, CRUD, API, Debouncing, SSR, Server-side Rendering, Responsive Design, Fetch API, Product Management, Vercel Deployment, Frontend Development

Screenshots

page 1 page 2 page 3 page 4 page 5

reference

Model downloaded from - https://www.turbosquid.com/3d-models/3d-tesla-model-s-plaid-2023-2248474

how to run

git clone https://github.com/ashgole/r3f_walkthrough.git
cd r3f_walkthrough
npm i
npm run dev