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>
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();
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();
Advantages of using Three.js
- Easy to learn.
- Great documentation with plenty of examples.
- Three.js is open source.
- It doesn’t require any third-party plugin to run the code.
- To understand Three.js, you only require to know about JavaScript.
- 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.
Latest comments (2)
@nitinfab great post. I wish I could hire you to help me with my three.js canvas lol
Hello , this content is so useful thank you.
Just for correction,,, the part where you have instructed to write the HTML code inside the index.js file, I have tried it and it brings an error .It works in the index.html file instead.Kindly correct that part to avoid confusion.