What is Three.js?
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
rendererconstructor is not given a canvas, it will create one for the user, which must be appended to DOM using theappendChildmethod.
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.
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.
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')
);
