Html Codes: WebGL- Basic 3D Geometries (Cube, Icosahedron, Octahedron, Tetrahedron, Torus and Torus-Knot)

Previous Codes

HTML5 WebGL by using Three.js and Sim.js let you easily add basic 3D objects and geometries. Below we have shown some of them. They are:
Cube Geometry, Icosahedron Geometry, Octahedron Geometry, Tetrahedron Geometry, Torus Geometry and Torus-Knot Geometry
You can add more details and make them more complex by manipulating their options and parameters. But it's nice for taking some 3D baby steps! Note that if you are unfamiliar with the code template we have used, refer to our previous simpler examples. Enjoy!
Our used libraries are found here:
http://html5freecode.com/libs/libs.zip

<!-- 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,app, tcnt=0;
function onLoad(){
	var container = document.getElementById("container");
	app = new MyApp();
	app.init({ container: container });
}

function textureload(){
	tcnt++
	if (tcnt==7){
		document.getElementById('ld').innerHTML="";
		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);

	sh= new Array()
	for (i=1; i<=6; i++){
	    sh[i]= new Shape();
	    sh[i].init(i);
	    this.addObject(sh[i]);
	}
	
    var light= new Light();
    light.init(-20,6,1);
    this.addObject(light);
    var light2= new Light();
    light2.init(40,8,10);
    this.addObject(light2);

    var k=21;
	this.camera= new THREE.OrthographicCamera(container.offsetWidth/ - k, container.offsetWidth/ k, container.offsetHeight/ k, container.offsetHeight/ - k, -500, 2000 );
  	this.camera.position.y= 2;
  	this.camera.position.z= 3;
	var a = new THREE.Vector3(0 , 0.5, 0 );  	
  	this.camera.lookAt(a);

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

//Define Objects Specifications:
Cube.prototype.init = function(){
	var map1 = "http://www.html5freecode.com/files/webgl-texture-green.jpg";
	var grass = THREE.ImageUtils.loadTexture(map1,null,textureload);

    var geometry = new THREE.CubeGeometry(40, 1, 60);
    var material = new THREE.MeshPhongMaterial( { map: grass} );
    var mesh = new THREE.Mesh( geometry, material ); 
    mesh.position.set(0,-1,0)
    this.setObject3D(mesh);
}
Shape.prototype.init = function(ind){
    switch (ind){
    	case 1:
			var geometry = new THREE.CylinderGeometry(1.5, 2, 4, 32, 32,false);
    		break;
    	case 2:
			var geometry = new THREE.IcosahedronGeometry(2.5);    	
    		break;
    	case 3:
			var geometry = new THREE.OctahedronGeometry(2.5);    	
    		break;
    	case 4:
			var geometry = new THREE.TetrahedronGeometry(2.5);
    		break;
    	case 5:
    		var geometry = new THREE.TorusGeometry(2,0.8);
    		break;
    	case 6:    	
    		var geometry = new THREE.TorusKnotGeometry(1.5,0.7);
    		break;
    }
	var map2 = "http://www.html5freecode.com/files/webgl-texture-purple.jpg";
	var purple = THREE.ImageUtils.loadTexture(map2,null,textureload);    
    var material = new THREE.MeshPhongMaterial( { map: purple } );
    var mesh = new THREE.Mesh( geometry, material ); 
    mesh.position.set(ind*6-21,3,-2)
    this.setObject3D(mesh);
}
Light.prototype.init = function(x,y,z){
	var lit = new THREE.PointLight( 0xffffff, 1.2);
	lit.position.set(x, y, z);
    this.setObject3D(lit);    
}

//The Changes of the Object in Each Scene:
Shape.prototype.update = function(ind){
	this.object3D.rotation.z += 0.01;
	this.object3D.rotation.x += 0.01;
}


</script>
</head>
<body style="" onLoad="onLoad();">
	<div style="text-align: left;display:inline"><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>
	<b><div id="ld" style="display:inline; font-size: 18pt; color: #9E0A2D;">&nbsp;&nbsp; . . . L o a d i n g . . .</div></b>
    <div id="container" style="width:95%; height:80%; overflow:hidden; position:absolute; background-color:#000000"></div>
</body>
</html>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: WebGL- Basic 3D Geometries (Cube, Icosahedron, Octahedron, Tetrahedron, Torus and Torus-Knot)

You can leave comments once you sign in/up.

Review

Links