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.

To be fair, a large part of the improvement of the developer experience is simply the result of better tooling after having adopted Vite and TypeScript.

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 base path 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.ts file. Nevertheless, this option can also be specified as a command-line flag.

TypeScript, in turn, takes the traditional three.js JavaScript-based development to the next level with its static typing resulting in rich IDE support, enhanced code expressiveness and the ability to catch bugs at the compilation stage as opposed to causing problems at runtime.

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:

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.

Blender 3.6

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.

Finally, it is now possible to develop React-based three.js applications using the React Three Fiber (R3F) library together with drei, a growing collection of components for R3F.

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.