Introduction to Three.js

Did you ever imagine that how these graphics and games are run on a web-browser? What is the main technology behind it? Off course it is not possible by just using HTML and CSS. In previous days we used WebGL for this task. WebGL(Web graphics Library) is JavaScript API which is used to render the 3-dimensional objects, 2-dimensional objects and Graphics on the Web-Browser. The WebGL API allows users to experience interactive content on webpages, with GPU acceleration, without having to first download or install any plug-ins. For developers, WebGL provides low-level access to hardware with the familiar code structure of OpenGL ES.

WebGL was created by Mozilla Organization. With all these benefits of WebGL there are some drawbacks of WebGL where Three.js comes into role. WebGL is very low level system that only draws basic objects like point, square and line. To do any meaningful thing with WebGL generally requires quite a bit of code and that is where Three.js comes in. 

What is Three.js?

Three.js is an open source JavaScript library that is used to display the graphics, 3D and 2D objects on the web browser. It uses WebGL API behind the scene.  Three.js allow you to use your GPU(Graphics Processing Unit) to render the Graphics and 3D objects on a canvas in the web browser. since we are using JavaScript so we can also interact with other HTML elements. Three.js was released by Ricardo Cabello in April 2010.

Why we use Three.js?

• Since Three.js is open source so we can easily watch the source code and understand the functionality of the code(functions).
• When we use WebGL for Graphics then it doesn’t support most of the browser but Three.js supports most of the browsers.
• It doesn’t required any third party plugin to run the code.
• You just need to work on only one programming language JavaScript and off course HTML.

How To Include Three.js in Your Projects?

There are a lot of ways to add Three.js in projects some of them are quite simple and some of them are a little bit complex, however they all ways said that we have to include any one of these files in our project:

• three.js
• three.min.js
• three.module.js

these all the files are available on the GitHub page of Three.js .

Approach 1: (Download the complete project Three.js): The easiest way to do is just download the complete three.js project on your System and use the files from there.

You can download the latest release of three.js from its GitHub page. Once you have downloaded it, open it and look inside the build folder, you’ll find the three scripts there.

Approach 2: (Install the package of Three.js using NPM or YARN): Three.js is also available as a package on NPM. This means that if you have Node.js and NPM set up on your computer, then you can open a command prompt and type:

npm i three

Then, you can import three.js from the three.module.js file into your JavaScript file by referring to the three package:

import * as THREE from "three";

And, if you prefer Yarn over NPM then also you can add the package using following command in the terminal window:

yarn add three

Approach 3: (Use the CDN Link): You can link the files from a CDN (Content Delivery Network), which is a remote site dedicated to hosting files so that you can use them in a website.

In fact, you can even use the Three.js.org site as a CDN. You can link the three.js file using this link: https://threejs.org/build/three.js, and include it in your HTML like this:

<script src="https://threejs.org/build/three.js"></script>

But there is a problem in using three.js.org CDN link by using this link you’ll always works on an updated version. It is good when we are in development mode but if we talked about production this isn’t good if any function or syntax change with the update your code will stop working so we suggest to use CDN from these sites:

• cdnjs.com
• www.jsdelivr.com

And that’s it by using any of these approach you can use Three.js in your project.