https://github.com/petercsipkay/basic-react-three-fiber-boilerplate
A minimal React Three Fiber boilerplate to help you get started with 3D web development. This template includes a basic scene setup with a rotating cube, proper lighting, camera controls, and responsive canvas.
https://github.com/petercsipkay/basic-react-three-fiber-boilerplate
boilerplate boilerplate-template r3f react-three-drei react-three-fiber three-js threejs threejs-boilerplate threejs-template webgl
Last synced: 3 months ago
JSON representation
A minimal React Three Fiber boilerplate to help you get started with 3D web development. This template includes a basic scene setup with a rotating cube, proper lighting, camera controls, and responsive canvas.
- Host: GitHub
- URL: https://github.com/petercsipkay/basic-react-three-fiber-boilerplate
- Owner: petercsipkay
- Created: 2024-11-24T11:30:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-24T11:47:46.000Z (over 1 year ago)
- Last Synced: 2025-04-06T15:05:27.158Z (about 1 year ago)
- Topics: boilerplate, boilerplate-template, r3f, react-three-drei, react-three-fiber, three-js, threejs, threejs-boilerplate, threejs-template, webgl
- Language: JavaScript
- Homepage: https://threejsresources.com/
- Size: 46.9 KB
- Stars: 6
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Three Fiber Boilerplate
A minimal React Three Fiber boilerplate to help you get started with 3D web development using React. This template includes a basic scene setup with a rotating cube, proper lighting, camera controls, and responsive canvas.
## Features
- React Three Fiber integration
- Basic Three.js scene setup
- Responsive canvas
- OrbitControls for camera manipulation
- Proper lighting setup
- Shadow support
- Animation system with consistent timing
- Fullscreen support
- Clean project structure
## Setup
Download Node.js. Run these commands:
```bash
# Install dependencies (only the first time)
npm install
# Run the local server at localhost:5173
npm run dev
# Build for production in the dist/ directory
npm run build
```
## Project Structure
```
├── src/
│ ├── components/
│ │ └── Scene.jsx
│ ├── App.jsx
│ └── main.jsx
├── index.html
├── package.json
└── vite.config.js
```
## Dependencies
- React
- React Three Fiber (@react-three/fiber)
- Three.js
- Vite (for building and development)
## Resources
For more Three.js and React Three Fiber resources, tutorials, and tools, visit:
- [Three.js Resources](https://threejsresources.com/) - A curated collection of Three.js resources
- [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber)
- [Three.js Documentation](https://threejs.org/docs/)
- [Three.js Examples](https://threejs.org/examples/)
- [React Three Fiber Examples](https://docs.pmnd.rs/react-three-fiber/getting-started/examples)
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Contributing
Feel free to submit issues and enhancement requests!
## Acknowledgments
This boilerplate is designed to provide a clean starting point for React Three Fiber projects. For more advanced features and resources, check out [threejsresources.com](https://threejsresources.com/).
## Author
[Peter Csipkay](https://petercsipkay.com/)