Getting Started With Three.js
Tags: tech, javascript, technology, programming
Published: 2021-03-21 04:27:03

---
title: Getting Started With Three.js
published: true
date: 2021-03-17 07:29:27 UTC
tags: tech,javascript,technology,programming
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/1456/1*qx2efypZpwBEk4536_PGAQ.png)](https://javascript.plainenglish.io/getting-started-with-three-js-e0941324b624?source=rss-9c6cbf57703------2)

All you need to know about animation in 3D.

I haven’t wanted to learn Three.js. It’s all because one of my clients viewed my [Upwork](https://www.upwork.com/o/profiles/users/~015577a52f264f2cb2/) profile and personally messaged me.

He wants to use 3D animation for their website. So I went over the internet and search for it. I have found out Three.js, Blender, Sketchup, React360 for 3D animation.

React 360 uses the Three.js concept, while Blender and Sketchup are software to create 3D animation.

After a little bit of research, I used Three.js for my client website.

So here is what I have learned.

You have to at least know about JavaScript before getting started with Three.js.

In previous days, Developers use WebGL(Web Graphics Library) for high-performance interactive 2D and 3D graphics. To know more about it, you can visit mdn.
WebGL is outdated since it requires a lot of code to create 3D graphics.

That’s why a modified version with the name Three.js came into the picture.

Three.js is a 3D Javascript library. It helps us to build 3D animation using Three.js.

You may have heard about React360, SketchUp — they use for creating 3D designs, and the concept remains the same.

Three.js is cool enough, and I am damn sure after learning it, you will use it in every project.

#Installation

If you are working with HTML, CSS, and JavaScript. Installation of Three.js is simple enough. You need to write a single line of code to start using Three.js.

Create a folder with the name of three in your preferred directory. Add files with the name index.html and style.css.

Inside index.js write the below code.

```
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>My first three.js app</title>
</head>
<body>
<script src=”https://threejs.org/build/three.js"></script>
</body>
</html>
```

And that’s it.

We haven’t done anything so far. Just used a script tag with a three.js URL.

#What Are We Building

<img width="100%" style="width:100%" src="https://media.giphy.com/media/S33DEnOTl4zBftgWbL/giphy.gif">

BoxGeometry is a class present in Three.js for a rectangular cuboid. After that, we are creating a material with MeshBasicMaterial class. Inside it, we can add parameters like color.

Now we will add geometry and material to the scene.
But what is `camera.position.z=5;`? It is to position our camera along the z-axis.

Now we have to render our scene and camera, So we will create a function and we will call that function.

```
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};

animate();
```

That’s it.

Now you can open your index.html or run the live server.
And you will be going to see an output like this.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/S33DEnOTl4zBftgWbL/giphy.gif">

#Complete Code 

```
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};

animate();
```

#Advantages of using Three.js
1. Easy to learn.
2. Great documentation with plenty of examples.
3. Three.js is open source.
4. It doesn’t require any third-party plugin to run the code.
5. To understand Three.js, you only require to know about JavaScript.
6. Three.js is supported by almost all Web browsers.

#Conclusion

I hope you like the tutorial. I tried to make it as easy as possible, thanks.

Follow me on [Medium](https://nitinfab.medium.com/) as well to read my latest content.