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

Written by @m_k_amin 21 July 2013

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

Code Snippet:

                                                
                                                <!-- this script is provided by https://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,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="https://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><a target='_blank' href='https://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.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300