https://github.com/tnahrf/React-Three-JS-Boilerplate
A simple boilerplate for a React JS + ThreeJS project (with CRA template).
https://github.com/tnahrf/React-Three-JS-Boilerplate
boilerplate react react-js three three-js
Last synced: about 1 year ago
JSON representation
A simple boilerplate for a React JS + ThreeJS project (with CRA template).
- Host: GitHub
- URL: https://github.com/tnahrf/React-Three-JS-Boilerplate
- Owner: lnahrf
- Created: 2021-01-06T16:34:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-09T19:06:34.000Z (about 5 years ago)
- Last Synced: 2023-11-11T16:27:30.788Z (over 2 years ago)
- Topics: boilerplate, react, react-js, three, three-js
- Language: JavaScript
- Homepage:
- Size: 1.31 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Three JS Boilerplate 
The first time I tried running a Three JS Scene on a React project I encountered a couple of problems until I eventually got the shtick of it, I hope this article and repository will save some developers a couple of precious hours.
You can either clone my boilerplate and start working from there or you can follow my guide on how to start a basic React + Three project from scratch.
Like it and want to support me? [
Buy me a coffee!](https://ko-fi.com/tk_ni)
# Using the boilerplate
**Step 1** Clone the repo
```
git clone https://github.com/tk-ni/React-JS-Three-JS-Boilerplate.git
```
**Step 2** In the main repo directory open a CMD/Terminal and type in these commands.
```
npm install
npm start
```
The boilerplate includes a basic **CRA** project structure and basic scene **MainScene.component.js** already imported in App.js.
Feel free to modify/copy/replace the MainScene component or anything else to fit your project's needs.
The boilerplate's folder structure follows the basic CRA template structure with a few modifications.
> - public
> - src
> - Assets ```- Store all your 3D Models/Textures/Graphics.```
> - Components ```- Store all your React/3D components (that aren't scenes).```
> - Scenes ```- Store all your scenes React components. ```
> - Styles ```- Store all your CSS/SASS files. ```
> - Utils ```- Store all your globally used functions (e.g sceneResize.js)```
> - App.js
> - index.js
---
## Update - 1.1
Added a loading manager functionality to the MainScene component.
Turn loading mode on using loading props, e.g.
```jsx
export default class App extends React.Component{
render(){
return(<>
>)
}
}
```
To modify the actual loading screen, edit the ***Loading.component.js*** in ```src/Components``` and ***loading.css*** in ```src/Styles```.
---
## Update - 1.2
Added handle window resizing functionality.
To add this functionality to other scenes, import handleResize from ```src/Utils/sceneResize.js ```.
```javascript
import {handleSceneResize, initEventListener} from './../Utils/sceneResize';
```
Add this code before the animation loop of every scene to handle window resizing.
```javascript
//init Handle Resize
handleSceneResize(window, camera, renderer, composer);
initEventListener(window);
```
***window*** refers to the global window object.
***camera*** refers to the camera the scene currently uses.
***renderer*** refers to the current renderer instance.
***composer*** (optional) refers to the current composer instance.
To modify how Three JS scenes handle window resizing, edit the ***sceneResize.js*** file in ```src/Utils/sceneResize.js ```
---
If you have any questions or comments, feel free to contact me!