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.
Step 2 : Open Notepad
notepad.gif
Step 3 : Create a 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