Three.js Development in 2023
I have recently resumed developing three.js-based applications after a period of little to no development with three.js and the developer experience has been first-class. It’s not that the three.js-specific developer experience was bad before, but now it’s just so much better.
Vite doesn’t really need much of an introduction but for those developers that still aren’t familiar with it, it’s a webpack-like tool to build your frontend applications. Vite’s claim to fame is that it is fast — supposedly, it’s orders of magnitude faster than using webpack. To boot, out of the box, Vite requires a minimal amount of configuration to start using it.
The only option I normally have to change when using Vite is the public
basepath which by default is set to
/. Instead, I need to specify it to be
./for embedded deployment under a nested public path. I set this option in the
vite.config.tsfile. Nevertheless, this option can also be specified as a command-line flag.
In addition to an up-to-date toolchain, contemporary three.js-based development also requires the use of ES6 and ES7 best practices including, but not limited to, the following:
- The use of ES6 modules
- The use of
- The use of destructuring
- The use of the rest parameter and the spread operator (
- The use of the
- The use of getters and setters
- The use of arrow function expressions
- The use of promises and
What’s more, the Blender-three.js pipeline, a major part of the three.js developer experience, is continuously improving due to glTF-specific enhancements being made to both Blender and three.js itself.
It is possible to use modelling tools other than Blender in conjunction with three.js. Nevertheless, it is my impression that the vast majority of three.js developers use Blender for their modelling needs.
In conclusion, three.js-based applications can be built in a myriad of ways and whichever approach you end up choosing, the three.js ecosystem has your back covered.