threejs-starter-kit

My current worlflow for quick THREE.js prototypes.

Usage

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.

Features

• 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

File Structure and coding style

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.