Jul 31, 2021
The Fundamentals Of Three.js
For those who have been curious about jumping into Three.js, I am elated to share that the documentation is outlined in a fantastic way, there are tons of excellent tutorials on the web and you really do not have to spend a bunch of time researching and learning about this library in order to make stunning 3D webpages. The demands and requirements for the world of front end design are manifold and always in a state of flux due to industry expectations and the nonstop evolution of frameworks and libraries (especially in JavaScript) and so dabbling in the territory of 3D can be beneficial for anybody curious about the composition of these technologies, wants to make their portfolio or landing page stand out in a contemporary way, or work towards finding a position on the cutting edge of front end development!
WHAT IS THREE.JS?
Three.js is a JavaScript library and API which was built on top of WebGL with the aim of designing and rendering easy 3D animations. The modeling capabilities are fairly limited compared to software such as Blender, but the idea is to incorporate 3D shapes in a simple and straightforward manner. Three.js can also be written directly between script tags within HTML documents requiring minimal linking of auxiliary documents and directories.
WHAT IS REQUIRED TO RUN THREE.JS?
With a browser, text editor, download from threejs.org / a good ‘ol “npm install three” you can be up and writing Three.js code in no time!
WHAT ARE THE PROPERTIES OF THREE.JS?
All Three.js projects require at minimum:
- Scene — this takes the form of “scene = new THREE.Scene()”.
- Camera — to have a perspective from which to view the animations.
- Objects — many of which can be located here.
- Mesh — this combines the geometry and material together.
- Renderer — for the final output.
Many of these have extended properties such as the luminosity of the lighting, size and rotation of the objects, and the specifications of the geometry. JavaScript can of course be combined with any of these, such as using a for loop to create multiple lights in random locations and beyond.
WHERE IS THE BEST PLACE TO START?
I began coding along to a YouTube tutorial which I will link here, it breaks down the fundamentals in an extremely clear way and got me excited about learning more about this library, as I hope it does for you as well!
Happy coding :)
