Three.js Core Elements
The scene is a container object that encapsulates the other objects and elements that we wish to show.
Three.js has a few different camera classes including a perspective camera, which we will use for 3D, and an orthographic camera, used for rendering 2D scenes or UI elements.
The renderer handles the display of the 3D scene using WebGL. It targets an HTML <canvas> element to draw into. Typically you will call the renderer to render each frame.
Three.js comes with several materials, such as Normal, Basic, Lambert, Phong and Shader. Materials are used to texture the faces of an object’s geometry. Attributes include things such as texture maps, colour and opacity.
Geometry defines the vertices of an object to draw it. Faces created by these vertices are also defined, which can be filled by a material. It can be defined manually through code or as predefined primitives such as planes or spheres. It can also be loaded from external files exported from 3D-modelling software.
A mesh is the combination of a geometry and a material. This mesh object is what we would typically think of as a physical object because it now has enough information to be seen.
Three.js is a powerful WebGL library for web apps and sites