r3f-gallery-template

🔗 Live Demo:
https://expo.homemadegarbage.com/demo/r3f-gallery-template/

Minimal virtual gallery template built with React Three Fiber.

A simple starter project for building walkable 3D gallery spaces on the web using React, Three.js, and @react-three/fiber.

---

✨ Features

• Walkable first-person camera
• Image panels with modal view
• React Three Fiber + drei
• Vite + React
• Tailwind CSS
• Lightweight and customizable

---

📦 Tech Stack

• React 19
• Three.js
• @react-three/fiber
• @react-three/drei
• Vite
• Tailwind CSS

---

🚀 Getting Started

1. Clone

git clone https://github.com/homemadegarbage/r3f-gallery-template.git
cd r3f-gallery-template

2. Install

npm install

3. Run

npm run dev

Open in browser:

http://localhost:5173

---

🖼️ Customization

Add Images

Edit:

src/data/pictures.js

Add or modify items in the pictures array.

---

Change Room Layout

Edit:

src/components/Room.jsx

---

Camera / Controls

Edit:

src/components/Player.jsx

---

📄 License

MIT

---

📚 Credits

Textures:

• "Beige Wall 001" by Poly Haven (CC0)
  https://polyhaven.com/a/beige_wall_001

• "WoodFloor040" by ambientCG (CC0)
  https://ambientcg.com/view?id=WoodFloor040

---

🏠️ Author

Created by HomeMadeGarbage