Rendering and Viewing a 3D Object
Create a basic 3D scene in Three.js using meshes and setting up the scene, camera, and renderer.
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. ...