Why Three.js instead of a 3D Software, like Blender?
Three.js is a JavaScript library that allows you to create 3D graphics on the web browser, which renders in real-time
Three.js can add interactivity, storytelling, and in general performant 3D visuals to websites
I am already used to working in Blender, but I want to combine my interests in web development, 3D graphics, and math, and Three.js is a great way to do that
Ah. Still, I miss ya, Blender default cube
What I have learned about 3D via coding
- I actually may not know as much as I thought about 3D fundamentals, and through Three.js, I have started to fill in the gaps I have behind the core of 3D graphics
- Taking notes and writing about what I have learned in Obsidian is a great way to review and solidify my understanding of the concepts I encountered in Blender and other 3D software e.g. the meaning of “textures”, the difference between different lighting approaches, the makeup of a 3D camera, and basis of translations, rotations, and scaling
- The web has the added constraint of performance, and I have learned to be more mindful of the performance of my code, and to be more efficient with my code
What I have learned about coding via 3D
- I have learned to be more mindful of how I structure my code and to create classes and components that are reusable
- I learned painful lessons about asynchronous code, and how difficult it is to leverage Promises and async/await in a way that is not confusing
- I started to notice unique constraints posed by browsers, which may or may not allow interactivity from the get-go
- I have learned that premature optimization is a huge time sink, one that distracted me from the core of what I wanted to learn and execute
If you are interested in ThreeJS, here are the resources that I used throughout my journey
- The Discover Three.js Online Book: https://discoverthreejs.com
- The Three.js Fundamentals - aka the official docs: https://threejs.org/manual/#en/fundamentals
What’s next?
- I am going to integrate Three.js into ongoing projects
- Look into framework-specific Three.js libraries, like Threlte which implements Three.js via Svelte
- WebGPU is coming, and I am excited to see what features I can make available to visitors to my sites and apps