DEV Community

loading...

Getting Started With Three.js

nitinfab profile image Nitin Sharma Originally published at javascript.plainenglish.io on ・3 min read

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 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>
Enter fullscreen mode Exit fullscreen mode

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

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();
Enter fullscreen mode Exit fullscreen mode

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.

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();
Enter fullscreen mode Exit fullscreen mode

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 as well to read my latest content.

Discussion (0)

pic
Editor guide