https://github.com/viniciuscestarii/threefibersimpleroom
🏠 A simple room created using Three.js and Next.js with the ThreeFiber library. You can use this project as a starting point to build and experiment with your own 3D environments.
https://github.com/viniciuscestarii/threefibersimpleroom
nextjs reactjs threefiber threejs
Last synced: about 1 month ago
JSON representation
🏠 A simple room created using Three.js and Next.js with the ThreeFiber library. You can use this project as a starting point to build and experiment with your own 3D environments.
- Host: GitHub
- URL: https://github.com/viniciuscestarii/threefibersimpleroom
- Owner: ViniciusCestarii
- Created: 2023-12-19T11:36:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-07T01:07:58.000Z (about 1 year ago)
- Last Synced: 2025-01-26T16:11:19.086Z (3 months ago)
- Topics: nextjs, reactjs, threefiber, threejs
- Language: JavaScript
- Homepage:
- Size: 5.23 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏠 ThreeFiberSimpleRoom
Welcome to ThreeFiberSimpleRoom, a simple room created with Three.js and Next.js using the ThreeFiber library.
## Getting Started
To get started with the development server, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/ViniciusCestarii/ThreeFiberSimpleRoom.git
```
2. Navigate to the project directory:
```bash
cd ThreeFiberSimpleRoom
```
3. Install dependencies:
```bash
npm install
# or
yarn
# or
pnpm install
```
4. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
5. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Features
- **Three.js:** Utilizes the power of Three.js, a popular JavaScript library for creating 3D graphics in the browser.
- **ThreeFiber:** Integrates ThreeFiber, a React renderer for Three.js, making it easy to create interactive and dynamic 3D scenes with React components.
## Project Structure
- **`/app`**: Next.js pages directory.
- **`/components`**: React components for the Three.js room, and other elements.
- **`/public`**: Static assets like images and models.
## Customize and Extend
Feel free to customize the room, add new elements, or experiment with different Three.js features. The project structure is designed to be easily extendable.
## Resources
- [Three.js Documentation](https://threejs.org/docs/)
- [ThreeFiber Documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)