WebGL- Simple Cubes with Texture
Written by 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 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://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>
<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!