Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kevinomyonga/r3f-cra-starter
A starter project for React-Three-Fiber bootstrapped with Create-React-App and some useful packages
https://github.com/kevinomyonga/r3f-cra-starter
react react-three-drei react-three-fiber starter-project threejs
Last synced: 3 months ago
JSON representation
A starter project for React-Three-Fiber bootstrapped with Create-React-App and some useful packages
- Host: GitHub
- URL: https://github.com/kevinomyonga/r3f-cra-starter
- Owner: kevinomyonga
- License: mit
- Created: 2021-09-23T18:13:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-09-23T22:03:09.000Z (over 3 years ago)
- Last Synced: 2024-10-12T05:44:08.036Z (4 months ago)
- Topics: react, react-three-drei, react-three-fiber, starter-project, threejs
- Language: TypeScript
- Homepage:
- Size: 642 KB
- Stars: 14
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# R3F CRA Starter
A starter project for React-Three-Fiber bootstrapped with [Create React App](https://github.com/facebook/create-react-app)'s PWA Typescript template and some useful packages.
# 
| Packages | Versions | Description |
| ------------------- | :------: | --------------------------------------------------------- |
| three | ^0.132.2 | A lightweight, 3D library with a default WebGL renderer. |
| @react-three/fiber | ^7.0.7 | A React renderer for Threejs on the web and react-native. |
| @react-three/drei | ^7.12.1 | Useful helpers for react-three-fiber |
| @react-spring/three | ^9.2.4 | A spring physics based React animation library |
### Features
- [x] Automatically inject r3f component in the Canvas
- [x] Support glsl imports
- [x] PWA Support
- [x] Layout for Canvas and DOM
- [x] Template for the meta data and header
- [x] Clean code using ESlint and Prettier
- [x] VSCode debug profiles for the server, Chrome, and Firefox
## Usage
1. Install the necessary node modules.
```
npm i
```
2. Run the npm script `start` to start development.
```
npm run start
```
3. When finishing development, run the npm script `build` to make the compressed files.
```
npm run build
```
### How to contribute :
```bash
git clone https://github.com/kevinomyonga/R3F-CRA-Starter.git
&& cd r3f-cra-starter && npm install
```
## License
Copyright (c) 2021 Kevin Omyonga
Released under the MIT license
http://opensource.org/licenses/mit-license.php
## Misc
Follow Kevin Omyonga: [Web](http://www.kevinomyonga.com/), [Twitter](https://twitter.com/kevinomyonga)