https://github.com/phyulwin/3d-web-avatar-viewer-threejs-react-threefiber

3D Web Avatar Viewer (Three.js, React Three Fiber, glb models). Clone the repo to get started. 🌟
https://github.com/phyulwin/3d-web-avatar-viewer-threejs-react-threefiber

3d-models nextjs react threefiber threejs web

Last synced: 27 days ago
JSON representation

3D Web Avatar Viewer (Three.js, React Three Fiber, glb models). Clone the repo to get started. 🌟

• Host: GitHub
• URL: https://github.com/phyulwin/3d-web-avatar-viewer-threejs-react-threefiber
• Owner: phyulwin
• License: cc0-1.0
• Created: 2026-04-15T06:31:41.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2026-04-17T07:33:11.000Z (3 months ago)
• Last Synced: 2026-04-17T08:33:45.978Z (3 months ago)
• Topics: 3d-models, nextjs, react, threefiber, threejs, web
• Language: TypeScript
• Homepage:
• Size: 25.5 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 3D Model Viewer (Web)

This project is a web-based 3D avatar viewer built with React Three Fiber and Three.js that loads and displays interactive `.glb` models in a browser environment with lighting, background, and camera controls. It allows users to dynamically switch models, view them in a physically grounded scene, and interact through zoom, rotation, and keyboard-triggered behaviors.           

Press the ```spacebar``` to stop the model from rotating. 

If the model is out of sight, reload the page.

![screenshot](doc/screenshot1.png)

## Project Setup

After cloning the project, go to the ```web-avatar-viewer``` folder and run the following commands in the terminal:

```

npx create-next-app@latest web-avatar-viewer

cd web-avatar-viewer

npm install three @react-three/fiber @react-three/drei three-stdlib

npm install zustand

```

Running the project: ```npm run dev```

---

![screenshot](doc/screenshot2.png)

## Models Credit (Sketchfab & Poly Haven)

Sky Background: [Qwantani Dusk 2 (Pure Sky)](https://polyhaven.com/a/qwantani_dusk_2_puresky)

```

"Blue Flower Animated" (https://skfb.ly/oDIqT) by morphy.vision is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"S**t happens" (https://skfb.ly/6RqNV) by Loïc Norgeot is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"Guitar" (https://skfb.ly/6wG8w) by Ivan Dnistrian is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"Birds" (https://sketchfab.com/3d-models/birds-3a9bb97be78944f9bffc23fb25c2154e) by Zacxophone

"Broken Steampunk Clock" (https://skfb.ly/6T9V7) by VassKacsoHunor is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"Flowers (Lowpoly)" (https://skfb.ly/pyJMy) by Vertex is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"Flower" (https://skfb.ly/6TGKv) by olilar is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

```

---

Music by everything_is_dead from Pixabay

---

### Project Features

* Random ```.glb``` model switching

* Camera controls (zoom, orbit)

* Auto-rotation + spacebar pause

* Environment lighting + background

* UI (Random + instruction text)

* Background music