https://github.com/ashgole/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.
https://github.com/ashgole/r3f_walkthrough

anima camera-c dynamic-lighting gltf interactive-visualizations mobile-responsiveness react-three-fiber reactjs rendering shadows tailwindcs threejs

Last synced: 16 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/ashgole/r3f_walkthrough
• Owner: ashgole
• Created: 2024-10-03T06:48:20.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-12T15:15:38.000Z (3 months ago)
• Last Synced: 2024-12-06T04:16:41.353Z (22 days ago)
• Topics: anima, camera-c, dynamic-lighting, gltf, interactive-visualizations, mobile-responsiveness, react-three-fiber, reactjs, rendering, shadows, tailwindcs, threejs
• Language: JavaScript
• Homepage: https://ashabb-tesla.vercel.app/
• Size: 14.9 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  





 We offer freelance web development using 
 MERN, NextJS and ThreeJS.



# 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](https://github.com/ashgole/r3f_walkthrough/blob/main/screenshots/1.png)

![page 2](https://github.com/ashgole/r3f_walkthrough/blob/main/screenshots/2.png)

![page 3](https://github.com/ashgole/r3f_walkthrough/blob/main/screenshots/3.png)

![page 4](https://github.com/ashgole/r3f_walkthrough/blob/main/screenshots/4.png)

![page 5](https://github.com/ashgole/r3f_walkthrough/blob/main/screenshots/5.png)

## 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

```