Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

three.js
javascript
animations
webgl

How to create a scene in three.js

Omer Kamran

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Three.js is a JavaScript library that renders graphics on the web using WebGL.

Animations play a significant role in attracting web traffic to one's web page. Three.js provides the required tools for developers to create elegant pages quite easily. Creating a scene in three.js requires setting up the following components beforehand:

  • Scene
  • Camera
  • Light

The Scene can then be populated using the .add() property with elements such as the following:

  • Mesh
    • Geometry
    • Material
  • Object3D
  • Light

Set up a scene

We can follow the instructions given below to set up 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)
}

Output

We get the following output by putting together the code explained above:

The "hello world" of three.js

Explanation

The HTML file contains the code explained above in the <script> tag.

  • To make three.js work in an HTML file, we need to change the type of the <script> tag to "module".
  • Inside animate, we have added two lines of code:
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

This adds rotation on the x and y axes of the cube.

Follow this link to learn how to make an object rotate about its own axis.

RELATED TAGS

three.js
javascript
animations
webgl

CONTRIBUTOR

Omer Kamran
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring