Building 3D Web Applications using HTML 5

Manish Singh
May 19, 2012
13.9k
0
0
Article

Introduction

This is a simple article for beginners for developing with HTML 5 that help you understand how to use 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"

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

Step 4 : Use the RequestAnimFrame to set the time related to make changes after some time:

Code

WINDOW.requestAnimFrame = (function (callback) {
        return WINDOW.requestAnimationFrame ||
        WINDOW.webkitRequestAnimationFrame ||
        WINDOW.mozRequestAnimationFrame ||
        WINDOW.oRequestAnimationFrame ||
        WINDOW.msRequestAnimationFrame ||
        function (callback) {
        WINDOW.setTimeout(callback, 2000 / 60);
        };
    })();

Step 5 : Define the Manish function; set the update time, randring and set the request of new frame:

Code

function Manish(Lt, Aspeed, t) {
        var D = new D();
        var T = D.getT();
        var TD = T - Lt;
        var AngleChange = Aspeed * TD * 2 * Math.PI / 1000;
        three.Cub.rotation.y += AngleChange;
        Lt = T;
        three.R.render(t.scene, t.camera);
        requestAnimFrame(function () {
            Manish(Lt, Aspeed, three);
        });
    }

Step 6 : Define a function with the name onlode; in the function we define the scene, material, render and camera:

Code

window.onload = function () {
        var Aspeed = 0.2;
        var Lt = 0;
        var R = new THREE.WebGLR();
        R.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(R.domElement);
        var Cam = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        Cam.position.z = 900;
        var scene = new THREE.Scene();
        var Mat = new THREE.MeshLambertMat({
            color: 0x00FF99
        });
        var Cub = new THREE.Mesh(new THREE.CubGeometry(300, 300, 300), Mat);
        Cub.overdraw = true;
        scene.add(Cub);
        var AL = new THREE.AL(0x555555);
        scene.add(AL);
        var DirLet = new THREE.DirLet(0xffffff);
        DirLet.position.set(1, 1, 1).normalize();
        scene.add(DirLet);
        var three = {
            R: R,
           Cam:Cam,
            scene: scene,
            Cub: Cub
        };
        Manish(Lt, Aspeed, three);
    };

Step 7 : Use the Three.js file in a HTML 5 application. The complete application is given below:

Code

<html>
<head>
<title>Tom application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, Min-scale=1.0, Max-scale=1.0">
<style>
body {
font-family: Monospace;
background-color:#FF9999;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://www.html5canvastutorials.com/libraries/Three.js">
</script>
<script>
    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTout(callback, 1000 / 60);
        };
    })();
   function Manish(Lt, Aspeed, t) {
        var D = new D();
        var T = D.getT();
        var TD = T - Lt;
        var AngleChange = Aspeed * TD * 2 * Math.PI / 1000;
        three.Cub.rotation.y += AngleChange;
        Lt = T;
        three.R.render(t.scene, t.camera);
        requestAnimFrame(function () {
            Manish(Lt, Aspeed, t);
        });
    }
    window.onload = function () {
        var Aspeed = 0.2;
        var Lt = 0;
        var R = new THREE.WebGLR();
        R.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(R.domElement);
        var Cam = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        Cam.position.z = 900;
        var scene = new THREE.Scene();
        var Mat = new THREE.MeshLambertMat({
            color: 0x00FF99
        });
        var Cub = new THREE.Mesh(new THREE.CubGeometry(300, 300, 300), Mat);
        Cub.overdraw = true;
        scene.add(Cub);
        var AL = new THREE.AL(0x555555);
        scene.add(AL);
        var DirLet = new THREE.DirLet(0xffffff);
        DirLet.position.set(1, 1, 1).normalize();
        scene.add(DirLet);
        var three = {
            R: R,
           Cam:Cam,
            scene: scene,
            Cub: Cub
        };
        Manish(Lt, Aspeed, three);
    };
</script>
</body>
</html>