Learning Three.js: Part 1: Terms and Techniques

0ayhlbqydc

Requirements:

Three.js is a JavaScript library that supports different forms of three-dimensional in-browser rendering including CSS3D and WebGL. It is the library behind projects like A-Frame and often paired with other libraries like Cannon.js or Ammo.js for advanced 3D web browser projects.

Terminology

Like many graphical rendering libraries, three.js works on the basis of scenes and objects. In order to render (show) an object, it must first be added to a scene. As a collection of objects, a scene is then paired with a camera (a view into a scene) and usually animated. In order, then, a scene is created. Objects are added to the scene. And then, when paired with a camera, objects can be rendered (shown) and animated/updated (refreshed).

Like other libraries, three.js also prefers a three-step series of functions. The first is an initialization of the settings for the project. The second is usually an animation or updating loop. As part of the updating is usually a third, rendering loop, which connects into the second. The first, initialization loop usually runs one time with the animating and rendering loops running infinitely as long as the project continues to be shown to users.

Because it works with 3D, three.js also handles different forms of geometriesmaterials, and meshes. In the metaphor of a body, a geometry can be thought of as the skeleton of an object. It defines the edges and points. A material is something like the muscles that covers the geometry and helps define how to treat those edges and points. Finally, a mesh is a combination of geometries and materials in a single package.

Techniques

Initially creating a set of variables (camera, scene, renderer, geometry, material, mesh) outside of the scope of any one function, the init() function works through the setting of values and the creating of the tools needed for the later functions. As the first of the three-step process, it preforms all of the initializing.

As the second and third parts of the three-step process, the animate() function calls the browser’s requestAnimationFrame function on itself, creating an infinite loop of updating objects, in the form of rotating the mesh, and then calling the renderer to render() using the scene and camera defined previously.

Finally, the last two function calls start the whole process by first calling init() and then animate() to kick-off the infinite looping of updating, animating, and rendering the changes.

Demo (Full Example)