WebGL- 3D Code Platform with Three.js and Sim.js

Written by @m_k_amin 16 July 2013

The HTML5 WebGL API is a low level API, which means you must work hard to achieve few. For most users it doesn't make sense to deal with 3D programming directly; instead, it’ better to use higher level 3D engines like Three.js and Sim.js. With these two libraries you can easily use a template to ease your projects. In the following example we have used this template and create two objects in it; a rotating cube and a light. Follow the comments in the code and create your own 3D objects like what we have done here. Our used libraries are found here: http://html5freecode.com/libs/libs.zip

Code Snippet:

                                                
                                                <!-- this script is provided by www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<!DOCTYPE html>
<html>
<head>
<title>Welcome to WebGL</title>
<script src="http://www.html5freecode.com/libs/Three.js"></script>
<script src="http://www.html5freecode.com/libs/jquery-1.6.4.js"></script>
<script src="http://www.html5freecode.com/libs/jquery.mousewheel.js"></script>
<script src="http://www.html5freecode.com/libs/RequestAnimationFrame.js"></script>
<script src="http://www.html5freecode.com/libs/sim.js"></script>
<script>
var renderer = null, scene = null,camera = null,mesh = null;
function onLoad(){
	var container = document.getElementById("container");
	var app = new MyApp();
	app.init({ container: container });
	app.run();
}
MyApp = function(){
	Sim.App.call(this);}
MyApp.prototype = new Sim.App();
MyApp.prototype.init = function(param){
	Sim.App.prototype.init.call(this, param);
	
    // Create Objects and Load them Here:
    var cube = new Cube();
    cube.init();
    this.addObject(cube);

    var light= new Light();
    light.init();
    this.addObject(light);    
}
//Objects Nececssary Definitions:
Cube = function(){
	Sim.Object.call(this);}
Cube.prototype = new Sim.Object();
Light = function(){
	Sim.Object.call(this);}
Light.prototype = new Sim.Object();

//Define Objects Specifications:
Cube.prototype.init = function(){
    var map = "http://www.html5freecode.com/files/webgl-texture-wood.jpg";
    var geometry = new THREE.CubeGeometry(1, 2, 1);
    var texture = THREE.ImageUtils.loadTexture(map);
    var material = new THREE.MeshPhongMaterial( { map: texture } );
    var mesh = new THREE.Mesh( geometry, material ); 
    mesh.rotation.x = 0.5;
    this.setObject3D(mesh);
}
Light.prototype.init = function(){
	var lit = new THREE.PointLight( 0xffffff, 2, 9);
	lit.position.set(1, 1, 4);
    this.setObject3D(lit);    
}

//The Changes of the Object in Each Scene:
Cube.prototype.update = function(){
	this.object3D.rotation.y += 0.01;
	this.object3D.rotation.z += 0.01;
	this.object3D.rotation.x += 0.01;
}
</script>
</head>
<body onLoad="onLoad();" style="">
	<div style="text-align: left"><font face="Tahoma"><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div>
    <div id="container" style="width:95%; height:80%; overflow:hidden; position:absolute; background-color:#000000"></div>
</body>
</html>
<a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>                                                
                                            

Example:


About @m_k_amin

This user is pending a biography.

M
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members:
advertisement 2