Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

three.js
javascript
webgl
javascript api

What is 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 uses WebGL in an HTML5 canvas to render animations that alone are not possible to create in WebGL. This library is responsible for creating lighting effects, shadows, materials, textures, and 3D geometrical models, which are very hard to create in WebGL.

Essentials

A three.js application usually consists of the following primary components:

The renderer constructor

A renderer is one of the main components of a Three.js project. It's responsible for rendering animations. There are several renderers provided by Three.js. The syntax necessary for the initialization of the renderer is given below:

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

The renderer is passed the HTML5 canvas as a parameter.

Note: If the renderer constructor is not given a canvas, it will create one for the user, which must be appended to DOM using the appendChild method.

document.body.appendChild(renderer.domElement)

The render method of the renderer object renders the scene.

renderer.render(scene, camera);

The render method is passed the scene and the camera as parameters.

  • scene: This contains the 3D elements in a tree-like structure.
  • camera: This is responsible for setting up the view of the visible components inside the scene.

The scene graph

The root of the scene graphScene graph is a tree-like structure consisting of the objects being rendered inside the canvas. It follows a parent-child approach. is the scene. Its children are the objects that are to be rendered inside the scene.

An example scenegraph

A particular node inside the scene (except the root) that contains children have them oriented relative to themselves. For example, if a sphere object is set as a child to another sphere object, setting up a rotation for the parent sphere will cause the child sphere to revolve around it.Scenegraph is a tree-like structure consisting of the objects being rendered inside the canvas. It follows a parent-child approach.

parentSphere.rotation.y += 0.01

Here, the yellow parent sphere’s rotation attribute is given a value so as to make it spin around its axis. This makes the child revolve around its parent at a fixed point.

Note: To explore more on how to set up a scene in three.js, read up on this link.

Objects

Objects inside a scene can contain the following:

  • Mesh
  • Geometry
  • Material
  • Texture
  • Light

Anything inside the scene is considered an object. Usually, shapes are rendered inside the scene using mesh objects. Mesh objects are what bind materials and geometry together.

There are a number of geometry shapes to choose from and most of them can be combined to create new shapes. Similarly, the library has to offer a diverse range of materials that can be applied to geometry.

Texture objects are sometimes used to wrap geometry objects in images instead of materials.

  • Images can be loaded from another file.
  • Images can be generated from the HTML canvas.
  • Images can be rendered from another scene.

For example, an image can be loaded from a file using the TextureLoader:

const textureLoader = new THREE.TextureLoader();

const material = new THREE.MeshBasicMaterial({
				map: textureLoader.load('./imagepath.jpg')
			})

Note: Find more on how to load textures in this Answer.

Light objects represent the different types of lights that can be used in a scene. They're used to illuminate the objects that are placed in the scene.

Example

An example of a Three.js project can be found at the link below, which can be accessed after hitting "Run." A graphical user interface (GUI) is present in the top right corner that can be used to control the properties of objects present in the scene.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

RELATED TAGS

three.js
javascript
webgl
javascript api

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