Rendering and Viewing a 3D Object
Explore how to create your first 3D scene using Three.js by setting up the scene, camera, and renderer. Understand how meshes represent 3D objects and learn to display them with basic controls for rotation and viewing. This lesson equips you with the foundational skills to render and view animated 3D objects on the web.
We'll cover the following...
Let’s create our first scene, which is a simple 3D scene that looks like this:
Mesh
In the preceding screenshot, we can see two objects that rotate. These objects are called meshes. A mesh describes the geometry of an object, that is, its shape and contains information about the material of the object. A mesh determines how the shape gets shown on screen through traits such as color, or whether the object is shiny or transparent.
In the previous screenshot, we can identify three of these meshes:
Object | Description |
Plane | This is a two-dimensional rectangle that serves as the ground area. In the above image, we can see this since it shows the shadows cast by the two meshes. We will create this as a very large rectangle so that we don’t see any edges. |
Cube | This is a three-dimensional cube and is shown on the left. It is rendered in red. |
Torus Knot | This is the Torus knot we can see to the right. This one is rendered in green. |
Setting up the scene
Each Three.js application at least needs a camera, a scene, and a renderer. The scene is the container that holds all the objects (meshes, cameras, and lights), the camera determines what part of the scene is shown when it is rendered, and the renderer takes care of creating the output on the screen, taking into account all the information from the meshes, cameras, and lights in the scene. ...