{
state: {
points: [
{location: {x,y,z : integer},
color?,
stroke?,
?}
]
},
config,
PointSource : {
update: (state) => {} : state
},
Drawer: {
draw: (state) => {} : void
},
Sounder: {
sound: (state) => : void
}
}
// pseudocode
{state,drawer,sounder,pointSource,log} = config.load()
app.start(state) { // loop over
log('beginning state', state)
newState = pointSource.update(state)
drawer.draw(state, newState)
sounder.sound(state, newState)
log('completed state', state)
state = newState
}
ThreeJS, TypeScript, GLSL, & Webpack boilerplate for quick prototyping.
With the introduction of Github Templates, I figured I'd share the boilerplate configuration I always use when starting a new Three.js + TypeScript + Webpack project. Simply click on the green "Use this template" button above to start your repo with this setup (or you can clone it as usual).
- Custom shader support: Simply save your shader files as
.glsl
,.vs
, or.fs
then use in TypeScript withimport shader from "./path/fileName.glsl";
- Hot-reloading: Automatic browser refresh and reload when TypeScript or Shader file changes. (Does not work with
.html
file changes.) - Path aliases: to avoid relative path hell. Turns
../../../utils/
intoUtils/
. To add more aliases:- Add another item under "paths" in
tsconfig.json
so TypeScript finds the module. - Also add it under "alias" in
webpack.config.js
so Webpack finds it too.
- Add another item under "paths" in
- Multiple-devices: Any device in the same network can access the dev code and gets hot-reloaded when the code changes. Simply find the local IP address of the dev machine, and point your testing devices to that address. For example: http://192.168.xx.xx:8000/web
- Make sure you have Node.js installed
- Navigate in your terminal to the folder where you've saved this project
- Type
npm install
- Then
npm run
- Point your browser to
http://localhost:8000/web
- If you see the spinning torus, you're ready to roll! All source files are in the
src/
folder.