Html Codes: WebGL- Simple Cubes with Texture

One great HTML5 feature is WebGl which lets you create and add 3D objects in the web pages. It needs no further loading like flash objects, and be executed on the visitor's (client) PC. So it is fast and beautiful. The following example shows how to set up WebGL by Three.js engine which simplifies the operation. In this example you can learn how to draw cubes, rotate and add textures to them. You can also find how to set the camera and light of for your scene. 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://html5freecode.com/libs/Three.js"></script>
	<script src="http://html5freecode.com/libs/RequestAnimationFrame.js"></script>
	<script>
	var path= 'http://html5freecode.com/';
	
	var renderer = null, 
		scene = null, 
		camera = null,
		cube = null,
		animating = false;
	
	function onLoad()
	{
        var container = document.getElementById("container");

	    renderer = new THREE.WebGLRenderer( { antialias: true } );
	    renderer.setSize(container.offsetWidth, container.offsetHeight);
	    container.appendChild( renderer.domElement );

	    scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
        camera.position.set( 0, 3, 3);
        camera.rotation.x= -Math.PI/4;

		var light = new THREE.DirectionalLight( 0xffffff, 1.5);
		light.position.set(0, 1, 1);
		scene.add( light );

        var mapUrl = path+"files/webgl-texture-green.jpg";
        var map = THREE.ImageUtils.loadTexture(mapUrl);                       
        var material = new THREE.MeshPhongMaterial({ map: map });
        var geometry = new THREE.CubeGeometry(5, 0.01, 5);
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        mapUrl = path+"files/webgl-texture-water.jpg";
        map = THREE.ImageUtils.loadTexture(mapUrl);                       
        var material2 = new THREE.MeshPhongMaterial({ map: map });
        var geometry2 = new THREE.CubeGeometry(2, 1.5, 1);
        cube2 = new THREE.Mesh(geometry2, material2);
        cube2.rotation.y = Math.PI / 3;
        cube2.position.x= -1;
        cube2.position.y= 0.5               
        scene.add(cube2);

        mapUrl = path+"files/webgl-texture-wood.jpg";
        map = THREE.ImageUtils.loadTexture(mapUrl);                       
        var material3 = new THREE.MeshPhongMaterial({ map: map });
        var geometry3 = new THREE.CubeGeometry(1, 0.5, 2);
        cube3 = new THREE.Mesh(geometry3, material3);
        cube3.rotation.y = Math.PI / 3;
        cube3.position.x= 0;
        cube3.position.y= 0.25;
        cube3.position.z= 0.5;       
        scene.add(cube3);

        run();
	}

	function run()
	{
		renderer.render( scene, camera );
    	requestAnimationFrame(run);	
	}
	</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%; position:absolute;"></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- Simple Cubes with Texture

You can leave comments once you sign in/up.

Review

Links