Some opinionated structure for a complex/scalable ThreeJS app
MIT License
My current organization for medium & large WebGL apps (i.e. must scale to a large team and run the course of a few months).
⚛ This branch only includes bare WebGL. If you want UI (with Preact), see the preact branch.
This is by no means stable; you probably shouldn't just go cloning it and trying to build your own apps. It is really opinionated and has a lot of things that might seem odd or overkill (though I have found them necessary on most big projects). Instead, you may just want to study it to see if you can find anything of interest.
Some things it tries to do:
NODE_ENV=production
or developmentTHREE.Object3D
, THREE.Group
or THREE.Mesh
update(dt, time)
, onTouchStart(ev, pos)
, etc propagate through entire scene graphAt some point many of these tools will be published on npm or as self-contained scripts, making this whole thing a bit more convenient. Until then... enjoy the mess! :)
Clone, npm install
, then:
# start development server
npm run start
Now open localhost:9966 and start editing your source code. Edit the honey.frag
or honey.vert
to see it reloaded without losing application state.
You can launch localhost:9966/?gui to open dat.gui.
For production:
# create a production bundle.js
npm run bundle
# deploy to a surge link for demoing
npm run deploy
For deploy to work, you will need to change the surge URL in package.json
"scripts" > "deploy"
field to something else.
MIT, see LICENSE.md for details.