There are 3 versions of the configurator: one made with react-three and 2 made with react-three-renderer. This shows you the different approach of these libraries.
In react-three-renderer Three.js' render method is called every animation frame by default; the third version shows you how you can disable automatic rendering in react-three-renderer and call Threejs' render method only when the component has been updated.
Check the live examples to see how this works.
Install livereload:
- install guard livereload
To install dependencies for each version of the configurator you have enter the react-three
, react-three-renderer
and the react-three-renderer2
folder subsequently and run:
- npm install
You can start livereload by running this command in the root folder:
- run
bundle exec guard
If you want to watch or build one of the versions of the configurator, you have to cd into the acccording folder and run:
npm run watch
starts a local webserver and watchifynpm run build
builds app and generates source map
The local webserver for the react-three version runs at port 8000 and the react-three-renderer version at port 8001.