My current worlflow for quick THREE.js prototypes.
After cloning install all node dependencies
npm i
Then launch the main task to open budo livereload server
npm start
You are good to go !
If you need a minified build just run
npm run build
Then put the /index.html
and /index.js
(+ any assets that you might be using) on your server.
- ES6 with Babel
- Budo (browserify local server with livereload)
- Glslify (browserify transform for glsl)
- My personnal GUI
- Basic asset preloader (you probably need to extend it for your needs)
- OrbitControls
- Simple setup with my ideal file structure
- Postprocessing with my fork of spite's WAGNER
I like to create "Objects" classes in src/objects
that contain elements from my scene. They usually extend THREE.Object3D
so that they can be added to a parent, have positions and rotations etc... I also sometime extend THREE.Mesh
directly but it can be a bit restrictive since in that case you need to prepare all geometries and material in the constructor before the call to super()
without being able to use this
.
Also i like to avoid using the THREE
global keyword and instead I import only the Objects that I need. This is pointless but it might be useful in the tree-shaking future / alternate reality.
import { Object3D, Mesh, MeshBasicMaterial } from THREE
I try to respect the Standard coding style.