Three.js is a JS library which is used to create and display 3D animation in a web browser. This library is used to make WebGL easier. Three.js was first released by Ricardo Cabello in April 2010.
Why do we use Three.js?
- When we use WebGL for Graphics then it doesn’t support most of the browsers but Three.js supports most of the browsers.
- 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
- Install wamp/xampp/lampp in system
- 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:
- three.js
- three.min.js
- 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 Scene that can be used to place everything that makes up an environment in a three.js project. It can contain cameras, lights, and of course objects composed of a 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. This is a <canvas> element the renderer uses 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 –
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, which has no shading.
MeshNormalMaterial – This gives colors to the faces of the mesh 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 is a combination of 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 basically a way of moving objects via user input.
Types of controls:-
OrbitControls – OrbitControls interprets mouse movement as 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 a drag & drop interaction.
PointerLockControls – This is a perfect choice for first person 3D games.
