Introduction To 3D In HTML5 With Three.js

Learn how to create 3D content, using HTML, CSS, and JavaScript, and run it in the browser.

 
Introduction
 
With the introduction of HTML5, we are able to do infinite things on the web, like playing audio, video etc. The question is - Can we develop 3D content that can be run on the browser? It would be so cool if we could develop 3D games, a 3D logo, or a complete 3D website, with the web technology and run it on the browser.
 
The answer is: Yes, we can. HTML5 offers a 3D library called WebGL -  it stands for web graphics library.
 
But, the problem is that the the web developer does not know about 3D and to create something in 3D, one should have the basic knowledge of 3D in theory as well as in programming. Well! That is not an easy thing and takes a lot of time to learn and create something.
 
What you need
  • A text editor
  • A browser with html5 compatibility
  • Basic knowledge of HTML
  • Basic knowledge of CSS
  • Basic knowledge of JavaScript
  • Basic knowledge of 3D (optional)
 
Introduction to 3D in three.js
 
A 3D world consists of multiple numbers of elements, but only some of them are necessary to initiate a 3D world. These elements are-
  • Camera (to see the objects -acts as an eye)
  • A Scene
  • An Object - cube, cylinder, bottle, a ship etc.
  • Renderer - responsible for showing the objects
In three.js, an object has three parts-
  • Material - e.g.- color.
  • Geometry - e.g- cube, cylinder.
  • Mesh - it takes geometry and material and forms an object.
For example, if you want a cube which is a geometry of color-red (the material), then mesh will take the geometry (cube) and paint it with a red color.
 
A Simple Scene
 
Initialize four basic variables.
  1. var Camera;  
  2. var Renderer;  
  3. var Scene;  
  4. var Cube;   
  5. Now let's create a basic scene  
  6. function InitScene()  
  7. {  
  8.    Scene = new THREE.Scene();  
  9.    //creating the camera  
  10.    var Fov=75; //it acts like camera lens  
  11.    var AspectRatio=window.innerWidth / window.innerHeight;  
  12.    var Near=1; //Set camera to see the objects- how much near  
  13.    var Far=10000; //set camera to see the objects- how much far  
  14.    Camera = new THREE.PerspectiveCamera( Fov, AspectRatio, Near,Far);  
  15.    Camera.position.z = 1000;  
  16.    //creating a render of size equal to our screen size  
  17.    Renderer = new THREE.WebGLRenderer();  
  18.    Renderer.setSize( window.innerWidth, window.innerHeight );  
  19.    geometry = new THREE.BoxGeometry( 200, 200, 200 );  
  20.    material = new THREE.MeshBasicMaterial( { color: 'red'} );  
  21.    Cube = new THREE.Mesh( geometry, material );  
  22.    Scene.add( Cube);  
  23.    document.body.appendChild( Renderer.domElement );  
  24. }  
Update the scene.
  1. function UpdateScene()  
  2. {  
  3.    //calling again UpdateScene to update the objects  
  4.    requestAnimationFrame( UpdateScene );  
  5.    //Render the objects  
  6.    Renderer.render( Scene, Camera );  
  7. }  
Now, we need to call the above method.
  1. //first call init method  
  2. InitScene();  
  3. //call update method which will (render)create an object on the screen  
  4. UpdateScene();  
After running the above code, you will see that it creates a red cube, inside our scene.
 
 
 
But, a 3D world does not looks good without animation. So, let's rotate our cube. In order to see the rotation effect, we will have to write our code inside the UpdateScene method because this is the part which is rendering the object. So, let's update the UpdateScene method.
  1. function UpdateScene()  
  2. {  
  3.       //calling again UpdateScene to update the objects  
  4.       requestAnimationFrame( UpdateScene );  
  5.       //Update the object rotation  
  6.       Cube.rotation.x += 0.01;  
  7.       Cube.rotation.y += 0.02;  
  8.       //Render the objects  
  9.         Renderer.render( Scene, Camera );  
  10. }  
 
 
Wow! You have just created a 3D world in the browser.
 
What You Can Do
  • You can create a 3D game with the JavaScript and three.js .
  • You can make your website more cool with 3D .
  • You can create a UI in 3D .
  • And much more...