WebGL- Simple Cubes with Texture

Written by @m_k_amin 14 July 2013

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

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/RequestAnimationFrame.js"></script>

	<script>

	var path= 'http://www.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="https://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>

<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