5 easy steps to learn three.js

February 6, 2018

prototechsolutions

three.js, three.js development, three.js technology

Application Development, Blog, Technology

0

5 easy steps to learn three.js

Among various continuously evolving technologies three.js is one of the fastest emerging JavaScript-based 3D graphics library/API built on top of WebGL to create 3D graphics. three.js eases down the complexity of WebGL to a user-friendly extent without compromising on its functionalities.
With three.js one can create complex 3D models with only a few lines of boilerplate code.

Benefits of three.js technology over WebGL:

  • Abstracts away many of the details of WebGL
  • No Plugins & supported in all modern browsers
  • Mobile support
  • DOM integration
  • Open source

 

Prerequisites for learning three.js:

  • Basic knowledge of Javascript 3D rendering
  • Web Browser (e.g. Google Chrome, Mozilla Firefox, etc…)
  • A text editor (e.g. Notepad, Notepad++, etc…)

 

Steps to create a simple cube using three.js:

1. Download three.js
Go to the three.js site https://threejs.org/ and click the download link on the left side of the screen. Open the downloaded zip file and copy the three.js file inside the build folder to your working folder hierarchy. In my case, “projectName/js”.
Include three.js in HTML file, it will look like this:-

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; overflow: hidden }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src=”js/three.js”></script>
<script>
// Our Javascript code will go here.
</script>
</body>
</html>

2. Create Scene
The scene is like a container in which you can place your geometries, lights, cameras and so on. Whatever geometries you want to show on your screen you need to add to the scene. It is just like a stage where you gather all the props and characters at one place.

var scene = new THREE.Scene();

In the above code which goes within your script tag, we have created a scene.

3. Setup Camera
The camera is an eye through which the scene is viewed. After positioning, wherever the camera points that part of the scene is captured. There are a few different cameras in three.js, we’ll use PerspectiveCamera. A PerspectiveCamera has the following attributes:-
1. FOV – Field of view is the area visible to the camera and displayed on the screen.
2. Aspect – It is the proportion of the horizontal field of view and the vertical field of view.
3. Near – This is the distance from which the camera will start rendering scene objects.
4. Far – The objects placed after this distance will not be rendered.

var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );

After creating the camera we need to position it to capture the correct view.

camera.position.set(x, y, z);

We have used the value z = 5 to keep the camera a little bit away from object’s position so that it won’t overlap the object.

4. Renderer
Once the Scene and camera are ready, we need to put them on screen. This task is done by WebGLRenderer.

var renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );

After creating the renderer, we append it to the DOM via the body element. This will make three.js create a canvas inside the body element that will be used to render our scene.
Now we have to create some geometry to display for accomplishing all that hustle.

 var geometry = new THREE.BoxGeometry( 1, 1, 1 );
 var material = new THREE.MeshBasicMaterial( { color: 0xf9b8ae } );
 var cube = new THREE.Mesh( geometry, material );
 scene.add( cube );

5. Animate loop
It is used to redraw things to the browser window. This loop will make the renderer draw the scene sixty times per second.

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

All you need is to follow all these steps to create your own three.js based model.

Your final code will look like this after integrating all those code snippets:

<!DOCTYPE html>
<html>
 <head>
 <meta charset=utf-8>
 <title>My first three.js app</title>
 <style>
 body { margin: 0; overflow: hidden }
 canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src=”js/three.js”></script>
 <script>
 var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
 camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
 var material = new THREE.MeshBasicMaterial( { color: 0xf9b8ae } );
 var cube = new THREE.Mesh( geometry, material );
 scene.add( cube );
function animate() {
 requestAnimationFrame( animate );
cube.rotation.y += 0.01;
 renderer.render( scene, camera );
 }
animate();
</script>
 </body>
</html>

And you’ll get the cube model as your final result:

 

To make your 3D model more interesting you can look into animations, textures, lights, colors, etc… with different types of geometries. To dig deeper into this three.js world, you can visit three.js documentation here, https://threejs.org/

Author: Ayush B
Contact us:
info@prototechsolutions.com
ProtoTech Solutions and Services Pvt Ltd

Post by Prototech Solutions