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 a web graphics library.
But, the problem is that 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 the 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 look 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 that 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 JavaScript and three.js.
  • You can make your website more cool with 3D.
  • You can create a UI in 3D.
  • And much more...