Sriya Patthak

An introduction to Three.js

By Sriya Patthak

Last updated cal_iconDecember 15, 2021

Three.js is a JS library used to create and display 3D animation in a web browser. This library is used to make WebGL easier. Ricardo Cabello first released Three.js in April 2010.

Why do we use Three.js?

  1. Using WebGL for Graphics doesn’t support most browsers, but Three.js supports most browsers.
  2. It doesn’t require any third-party plugin to run the code.

Installation & Setup the Local Environment

Check the following points to setup three.js in your app

  1. Install wamp/xampp/lampp in the system
  2. Download the three.js package, or we can add cdn links also

Run http://localhost/myapp

we have to include any one of these files in our project:

  1. three.js
  2. three.min.js
  3. three.module.js

npm i three

import * as THREE from “three”;

How to use it 

  • To display anything with three.js, we need three things: scene, camera and renderer, so that we can render the scene with the camera.

Scenes – 

A Scene in three.js is a constructor that can be used to create an instance of a Scene that can be used to place everything that makes up an environment in a three.js project. It can contain cameras, lights, and objects composed of geometry and material.

Cameras – 

As we all know, cameras are used to record images. The most common camera in three.js is the PerspectiveCamera. It gives a 3d view where things in the distance appear smaller than things up close. PerspectiveCamera defines a frustum(A frustum is a solid pyramid shape with the tip cut off).

Its frustum is based on 4 properties which are near, far, fov & aspect.

Syntax : PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov — Camera frustum vertical field of view.

aspect — Camera frustum aspect ratio.

near — Camera frustum near plane.far — Camera frustum far plane.

Renderer – 

we add the renderer element to our HTML document. The renderer uses this <canvas> element to display the scene to us.

Geometry –

Geometry is the structure of every model in three js. Geometries store attributes (vertex positions, faces, colors, etc.)

Types – Regular & Buffer

Material –

The material defines how objects will appear in the scene. It determines how the surface of our geometry is drawn. We can say that If the Geometry is our skeleton, defining the shape, then the Material is our skin.

Types of material:-

MeshBasicMaterial– This is the basic material. We can pass a color in as a parameter to get a solid colored object with no shading.

MeshNormalMaterial – This gives colors to the mesh faces differently based on the face’s normal or what direction they are facing.

MeshLambertMaterial – This will give our geometry shading a dull surface. Lambert is a common material in most 3D applications. MeshStandardMaterial – this combines Lambert and Phong into a single material. It has properties for roughness and metalness, and adjusting these can create both dull or metallic-looking surfaces.

Controls –

Control is a way of moving objects via user input.

Types of controls:-

OrbitControls – OrbitControls interprets mouse movement as a rotational force. Through clicking and moving the mouse, all objects will rotate along the y-axis in that direction.

DragControls -This class can be used to provide drag & drop interaction.PointerLockControls – This is a perfect choice for first-person 3D games.

Get In Touch

How Can We Help ?

We make your product happen. Our dynamic, robust and scalable solutions help you drive value at the greatest speed in the market

We specialize in full-stack software & web app development with a key focus on JavaScript, Kubernetes and Microservices
Your path to drive 360° value starts from here
Enhance your market & geographic reach by partnering with NodeXperts