WebGL- 3D Code Platform with Three.js and Sim.js
Written by 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 http://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='http://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!