Introduction to Three.js
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?
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.
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:
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
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:
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:
And that’s it by using any of these approach you can use Three.js in your project.