A Survey of three.js

Intent

I’m going to provide an overview of the three.js library and the surface area of it’s API. While not exhaustive, the goal of this blog is to give an idea of the sorts of problems which can be solved with three.js, and what tools are afforded to developers who chose it.

Key Concepts

The foundation of any three.js experience is rooted in three elements: a scene, a camera, and a renderer.

Scenes

Scenes are the most fundamental building block of three.js; they determine what gets added and where. Any objects, lights, or cameras need to be placed within a scene.

Cameras

The most common camera is the PerspectiveCamera, which are defined by their field of view (FOV), aspect ratio, minimum, and maximum distance. A few of the other Cameras are defined as groups of PerspectiveCameras (ArrayCamera, CubeCamera, and StereoCamera).

Renderer

The default and most common renderer is the WebGLRenderer. This component abstracts the complex WebGL library, rendering the scene to a canvas element in the browser.

Meshes

Meshes are the mechanism by which objects are placed into a scene. To create a mesh, you combine an geometry and a material.