An introduction to Three.js

Three.js is a library to make WebGL simpler

What is Three.js?

Three.js is a library to make WebGL simpler. Gracious… OK then, at that point… ? Along these lines, the following inquiry is:

What is WebGL?

WebGL is an API. It allows you to get to a PC’s specific designs equipment utilizing JavaScript, and render the yield to a site page in a standard component. Prior to WebGL, admittance to that particular equipment was just truly feasible with work area programming. The program was caught in 2D town (barring outsider modules like Adobe Flash).

For what reason would I need to get to the illustrations equipment?

The short answer is to attract stuff 3D, and for crude force, even in 2D.

In a PC (I’m talking work areas, workstations and your cell phone) there are two sections that really figure stuff: the Central Processing Unit (CPU), utilized for most things, and the specific designs equipment, called the Graphics Processing Unit (GPU). The issue is CPUs simply aren’t sufficiently quick to do the sheer number of computations required in a great deal of continuous 3D designs (PC games are a genuine model), particularly while attempting to run the remainder of the PC simultaneously. The GPU is intended to take on these illustrations computations all things being equal, and does as such incredibly well.

For what reason do I require Three.js in case we are really composing WebGL?

The primary motivation to utilize a library when working with WebGL is the immense measure of code expected to do anything in any case.

Here is a guide to outline the distinction. We’ll contrast the code required with draw two or three basic scenes. Try not to stress over understanding the code, however see how much code WebGL includes.

var camera, scene, renderer, geometry, material, mesh;


function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);



function animate() {



function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);


Three.js does a great deal of the dull pieces for you: inside it’s producing WebGL code while uncovering a less difficult API. Three.js likewise has pre-fabricated parts and partner techniques you can exploit to get everything rolling quicker.

It’s significant Three.js isn’t the main JavaScript library to make WebGL simpler. For instance, Greensock, PlayCanvas and Pixi.js all deal the advantages of WebGL without really composing WebGL. I think Three.js is a superior decision for learning 3D anyway as the library has less interruptions and is centered around a certain something.

Where would i be able to utilize Three.js?

You can utilize Three.js in any capacity you could utilize , including full-screen movements, insofar as the gadget upholds WebGL.

Every one of the most recent programs support WebGL, however assuming you need to utilize Three.js on a customer project, you’ll need to weigh up the absence of help in prior renditions of Internet Explorer and Android.