08 February 2018

Introduction to Three.js JavaScript library

If you want to create animated 3D graphics and display them in browser, you need to know WebGL, which stands for Web Graphics Library. It is JavaScript API for rendering graphics and it is built over web page canvas. However, using WebGL API may not be for everyone, but with help of available frameworks and libraries built on top of it, coding 3D animations is much easier.

One of those libraries is three.js, which allows creation of GPU-accelerated 3D animations. There is no plugins browser involved, just pure JavaScript programming language. You can do a lot with it like scenes, effects, cameras, animations, data loaders and much more. There is support for JSON export/import if you wish to connect with other software like Blender or 3D Studio Max.

Basic example is available on Wikipedia, I have added only comments.

 <html lang = "en">  
  <title>Three.js test</title>  
  <meta charset = "UTF-8" />  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>  
   // set variables to use  
   var camera, scene, renderer, geometry, material, mesh;  
   // call functions   
   // define init function  
   function init() {  
     // create new Scene  
     scene = new THREE.Scene();  
     // create new perspective camera with starting parameters (see docs)  
     camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );  
     camera.position.z = 1000;  
     // create new box and set material color and wireframe option  
     geometry = new THREE.BoxGeometry( 200, 200, 200 );  
     material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );  
     // add box and material to mesh and place mesh to scene  
     mesh = new THREE.Mesh( geometry, material );  
     scene.add( mesh );  
     // define new renderer and set size  
     renderer = new THREE.WebGLRenderer();  
     renderer.setSize( window.innerWidth, window.innerHeight );  
     // append renderer to html file  
     document.body.appendChild( renderer.domElement );  
   // set animation by increasing x and y rotation by small amount for every render call  
   function animate() {  
     requestAnimationFrame( animate );  
   function render() {  
     mesh.rotation.x += 0.01;  
     mesh.rotation.y += 0.02;  
     renderer.render( scene, camera );  

When you run this simple file you will see wireframed box rotating in your browser. Something like this image below. Nice.

Now, let's change some parameters. Set camera.position.z = 500 to get closer to the box.
Set mesh.rotation.x += 0.1 to get the box rotate 10 times faster.
Set MeshBasicMaterial color to blue, 0x0000ff.
Simple changes but fast results.

To add another box to the Scene, insert next lines after scene.add(mesh);

// add another box
mesh2 = new THREE.Mesh( geometry, material );
mesh2.position.x = -350;
scene.add( mesh2 );

If we want our second box to rotate, insert next line inside render function:

mesh2.rotation.x += 0.01;

Now we have two rotating boxes. Let's change color to green, blue is too dark.

Using same logic we add as many objects as we want to the Scene. Off course, using loops is preferred.




template by blogger templates