How to create a scene in three.js

Initialize the scene

The scene needs to be initialized after importing the three.js library as shown below:

const scene = new THREE.Scene();

We can now use scene.add to add elements to our scene after initializing them. We will start with the camera.

Set up the camera

const camera = new THREE.PerspectiveCamera(fov, aspect_ratio, near, far)

We do the following in the code above:

• We use the PerspectiveCamera. This camera mimics the way the human eye sees.
• The fov parameter refers to the ‘field of view’ of the camera.
• The aspect_ratio is usually set as the size of the screen. Ideally, it is kept the same as the size given to the renderer function (explained below). This can be obtained using the window property from the DOM as shown below:

const aspect_ratio = {
    width: window.innerWidth,
    height: window.innerHeight
}

// this can be passed as a parameter 
// using the width and height properties
// (aspect_ratio.width / aspect_ratio.height).

• The near parameter is the closest distance that the camera will capture.
• The far parameter is the farthest distance the camera will capture.

The position of the camera can be set as shown below:

camera.position.x = 0
camera.position.y = 0
camera.position.z = 4

// or we can use a Vector3

camera.position.set(0,0,4)

By default, the objects are placed at the center of the plane.

Lastly, we add the camera to the scene:

scene.add(camera)

Place the light

Placing a light source is a crucial part of setting up the scene. It illuminates the space and makes the objects visible or, in some cases, adds shades and details to the placed objects. We need to use its constructor first to initialize the kind of light we want to use.

const light = new THREE.DirectionalLight(color, intensity)

• In this snippet, we have used DirectionalLight. This light gets emitted only in a specific direction.
• Here, color decides what color we want our light to be.
• The intensity parameter is the intensity of the light.

By default, light is placed at coordinates: (0,0,0). We can set the position of the light in the following way:

light.position.set(x,y,z)

We finish by adding it to the scene:

scene.add(light)

Add a shape

Now we can add a shape to our scene. To create one, we first have to initialize the geometry and material and apply them to a mesh.

const geometry = new THREE.BoxGeometry (height, width, depth)

Here, we use a simple BoxGeometry.

• The height parameter refers to the height of the box.
• The width parameter refers to the width of the box.
• The depth parameter refers to the depth of the box. There are three more parameters—widthSegments, heightSegments, and depthSegments. The last three are all optional parameters that default to the value of 1.

Then, we choose the material:

const material = new THREE.MeshPhongMaterial()

• Here, we use MeshPhongMaterial. This is used to simulate shiny and reflective surfaces.

Any kind of material we use inherits directly from the Material class. This means all the methods that apply to the Material class can be used on the material we use.

Note: There is an exception for the color property, which is part of the inheriting material class and not the base class. This allows us to set the color of the material.

material.color = new THREE.Color(0x0ffff0)

Here, THREE.Color is another base class explained in this Answer.

Now we use the mesh to create the shape we need:

const box = new THREE.Mesh(geometry,material)

• geometry is the BoxGeometry we initialized above.
• material is the MeshPhongMaterial we used previously.

Finally, we add the shape to our scene:

scene.add(box)

Render the scene

After the scene is set, we need to create a render function that updates to render the animations on the screen.

const renderer = new THREE.WebGLRenderer({canvas: canvas})

• A scene is typically rendered using the WebGLRenderer. However, the usage may vary depending upon the needs.
• The WebGLRenderer is given a canvas object as a parameter to render the scene in.

Note: If no parameters are passed, the renderer will create a new canvas, which can be appended to the DOM.

We can set the size of the renderer using the setSize property:

renderer.setSize(aspect_ratio.width, aspect_ratio.height)

Finally, we will call the render method to render the scene:

renderer.render(scene, camera)

This method takes the scene we created and the camera as parameters.

The animation function

If we are creating a scene with moving objects, we need to create a function that updates to render the animation we require. To do that, we will need to use the window.requestAnimationFrame method. For a more detailed explanation, you can visit this Answer.

const renderFunction = () =>
{
    // Render
    renderer.render(scene, camera)

    // Call function again on the next frame
    window.requestAnimationFrame(renderFunction)
}

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;