Post
Ask Question

Building 3D Web Applications using HTML 5

Introduction

 
This is a simple article for beginners for developing with HTML 5 that help you understand how to use the Three.js file used in HTML 5 application to build 3D web applications using HTML only. We know that HTML is an acronym for "HyperText Markup Language" used to display data in a browser. The Three.js in HTML 5 is mainly used developed animated or 3D application. HTML 5 is the advanced version of HTML. The Three.js file is mainly used to develop 3D applications. Three.js is a lightweight 3D engine with the purpose of just enough abstraction over these new browser features to make it easy to render compelling 3D scenes using JavaScript. Three.js allows you to choose between a Canvas renderer and a WebGL renderer. The WebGL renderer is many times faster but does not run in as many browsers. The renderer is a normal HTML element and so you can overlay it with other HTML elements.    
 
Step 1: If you create a 3D application, first, we create a process scene, renderer, camera, and materials.
  • Scene : Scene is provide the standard choice chosen the Canvas and WebGl.
  • Camera : In camera we have define the inner height inner width of the windows.
  • Render : We set the all functionality of 3D application.
  • Materials : Materials is a one of the most useful parts of Three.js. In this part we create the faces separately and add them to the scene.
Step 2 : Open Notepad
  • Click->Start button->Notepad
  • Give the file a name of your choice
  • Click New button->save
  • There the name is "Hunter.html"
notepad.gif
 
Step 3 : Create a Folder
  • Right-click of Desktop Screen-> New-> Folder
  • Name of Folder is "Manish"
  • Finally, all HTML files and related sources are saved in that folder
folder.gif
 
Step 4: Use the RequestAnimFrame to set the time related to make changes after some time:
 
Code
  1. WINDOW.requestAnimFrame = (function (callback) {  
  2.         return WINDOW.requestAnimationFrame ||  
  3.         WINDOW.webkitRequestAnimationFrame ||  
  4.         WINDOW.mozRequestAnimationFrame ||  
  5.         WINDOW.oRequestAnimationFrame ||  
  6.         WINDOW.msRequestAnimationFrame ||  
  7.         function (callback) {  
  8.         WINDOW.setTimeout(callback, 2000 / 60);  
  9.         };  
  10.     })();  
Step 5: Define the Manish function; set the update time, rendering and set the request of new frame:
 
Code
  1. function Manish(Lt, Aspeed, t) {  
  2.         var D = new D();  
  3.         var T = D.getT();  
  4.         var TTD = T - Lt;  
  5.         var AngleChange = Aspeed * TD * 2 * Math.PI / 1000;  
  6.         three.Cub.rotation.y += AngleChange;  
  7.         Lt = T;  
  8.         three.R.render(t.scene, t.camera);  
  9.         requestAnimFrame(function () {  
  10.             Manish(Lt, Aspeed, three);  
  11.         });  
  12.     }  
Step 6 : Define a function with the name onlode; in the function, we define the scene, material, render and camera:
 
Code
  1. window.onload = function () {  
  2.         var Aspeed = 0.2;   
  3.         var Lt = 0;  
  4.         var R = new THREE.WebGLR();  
  5.         R.setSize(window.innerWidth, window.innerHeight);  
  6.         document.body.appendChild(R.domElement);  
  7.         var Cam = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);  
  8.         Cam.position.z = 900;  
  9.         var scene = new THREE.Scene();  
  10.         var Mat = new THREE.MeshLambertMat({  
  11.             color: 0x00FF99  
  12.         });  
  13.         var Cub = new THREE.Mesh(new THREE.CubGeometry(300, 300, 300), Mat);  
  14.         Cub.overdraw = true;  
  15.         scene.add(Cub);  
  16.         var AL = new THREE.AL(0x555555);  
  17.         scene.add(AL);  
  18.         var DirLet = new THREE.DirLet(0xffffff);  
  19.         DirLet.position.set(1, 1, 1).normalize();  
  20.         scene.add(DirLet);  
  21.         var three = {  
  22.             R: R,  
  23.            Cam:Cam,  
  24.             scene: scene,  
  25.             Cub: Cub  
  26.         };  
  27.         Manish(Lt, Aspeed, three);  
  28.     };  
Step 7: Use the Three.js file in an HTML 5 application. The complete application is given below:
 
Code  
  1. <html>  
  2.     <head>  
  3.         <title>Tom application</title>  
  4.         <meta charset="utf-8">  
  5.             <meta name="viewport" content="width=device-width, user-scalable=no, Min-scale=1.0, Max-scale=1.0">  
  6.                 <style>  
  7. body {  
  8. font-family: Monospace;  
  9. background-color:#FF9999;  
  10. margin: 0px;  
  11. overflow: hidden;  
  12. }  
  13. </style>  
  14.             </head>  
  15.             <body>  
  16.                 <script src="http://www.html5canvastutorials.com/libraries/Three.js"></script>  
  17.                 <script>  
  18.     window.requestAnimFrame = (function (callback) {  
  19.         return window.requestAnimationFrame ||  
  20.         window.webkitRequestAnimationFrame ||  
  21.         window.mozRequestAnimationFrame ||  
  22.         window.oRequestAnimationFrame ||  
  23.         window.msRequestAnimationFrame ||  
  24.         function (callback) {  
  25.             window.setTout(callback, 1000 / 60);  
  26.         };  
  27.     })();  
  28.    function Manish(Lt, Aspeed, t) {  
  29.         var D = new D();  
  30.         var T = D.getT();  
  31.         var TD = T - Lt;  
  32.         var AngleChange = Aspeed * TD * 2 * Math.PI / 1000;  
  33.         three.Cub.rotation.y += AngleChange;  
  34.         Lt = T;  
  35.         three.R.render(t.scene, t.camera);  
  36.         requestAnimFrame(function () {  
  37.             Manish(Lt, Aspeed, t);  
  38.         });  
  39.     }  
  40.     window.onload = function () {  
  41.         var Aspeed = 0.2;   
  42.         var Lt = 0;  
  43.         var R = new THREE.WebGLR();  
  44.         R.setSize(window.innerWidth, window.innerHeight);  
  45.         document.body.appendChild(R.domElement);  
  46.         var Cam = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);  
  47.         Cam.position.z = 900;  
  48.         var scene = new THREE.Scene();  
  49.         var Mat = new THREE.MeshLambertMat({  
  50.             color: 0x00FF99  
  51.         });  
  52.         var Cub = new THREE.Mesh(new THREE.CubGeometry(300, 300, 300), Mat);  
  53.         Cub.overdraw = true;  
  54.         scene.add(Cub);  
  55.         var AL = new THREE.AL(0x555555);  
  56.         scene.add(AL);  
  57.         var DirLet = new THREE.DirLet(0xffffff);  
  58.         DirLet.position.set(1, 1, 1).normalize();  
  59.         scene.add(DirLet);  
  60.         var three = {  
  61.             R: R,  
  62.            Cam:Cam,  
  63.             scene: scene,  
  64.             Cub: Cub  
  65.         };  
  66.         Manish(Lt, Aspeed, three);  
  67.     };  
  68. </script>  
  69.             </body>  
  70.         </html>  
Output
 
 bbbbbbbbbbbbbbbbbbbbbb.gif
 
Resources


Similar Articles