Introduction
This Chapter demonstrates about the WebGL Meshes and Geometry user can get the different frame work for the 3D objects which will display on the screen, following are the concepts covered in this chapter.
- Meshes
- Geometry
Description
Meshes are made up with Two different things which are shown below.
- Geometry geometry which are similar to the scaffold for a shape and its made up of an array of x, y, and Z coordinates are called vertices which defines in 3D spaces and the shape boundaries.
- Meterial Which define covering for skeletal structure there is a lot of different types in three.js Materials contain their own modules.
Description
Geometry made up with the two things those are the vertices and faces. In which vertices defines the position in a space and those are specifies the X, Y, Z coordinates as shown below.
Geometry can be divided into three types which are listed below.
- Inbuilt Geometry
- Custom Geometry
- Exported Geometry
Description
Three.js have the large number of geometries and shapes are ready to use and user can also find instructions how to use Three.js documentation. In order to get these geometry please refer the official web site of Three.js. which contains the several examples with explanations.
The code below demonstrates the example of the inbuilt geometry rotating sphere of app.js as shown below.
[c]
var example = (function() {
"use strict";
var scene = new THREE.Scene(),
light = new THREE.PointLight(0xffffff),
camera,
renderer = new THREE.WebGLRenderer(),
sphere,
stats;
function initScene() {
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl-container").appendChild(renderer.domElement);
scene.add(light);
camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.z = 80;
scene.add(camera);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
sphere = new THREE.Mesh(
new THREE.SphereGeometry(
15,
50,
50),
material);
sphere.name = "sphere";
scene.add(sphere);
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
render();
};
function render() {
sphere.rotation.y += 0.005;
renderer.render(scene, camera);
requestAnimationFrame(render);
stats.update();
};
window.onload = initScene;
return {
scene: scene,
sphere: sphere
}
})();
[/c]
The code below demonstrates the stats.js file as shown below.
[c]
var Stats = function () {
var startTime = Date.now(), prevTime = startTime;
var ms = 0, msMin = Infinity, msMax = 0;
var fps = 0, fpsMin = Infinity, fpsMax = 0;
var frames = 0, mode = 0;
var container = document.createElement( 'div' );
container.id = 'stats';
container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
var fpsDiv = document.createElement( 'div' );
fpsDiv.id = 'fps';
fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
container.appendChild( fpsDiv );
var fpsText = document.createElement( 'div' );
fpsText.id = 'fpsText';
fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
fpsText.innerHTML = 'FPS';
fpsDiv.appendChild( fpsText );
var fpsGraph = document.createElement( 'div' );
fpsGraph.id = 'fpsGraph';
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
fpsDiv.appendChild( fpsGraph );
while ( fpsGraph.children.length < 74 ) {
var bar = document.createElement( 'span' );
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
fpsGraph.appendChild( bar );
}
var msDiv = document.createElement( 'div' );
msDiv.id = 'ms';
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
container.appendChild( msDiv );
var msText = document.createElement( 'div' );
msText.id = 'msText';
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
msText.innerHTML = 'MS';
msDiv.appendChild( msText );
var msGraph = document.createElement( 'div' );
msGraph.id = 'msGraph';
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
msDiv.appendChild( msGraph );
while ( msGraph.children.length < 74 ) {
var bar = document.createElement( 'span' );
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
msGraph.appendChild( bar );
}
var setMode = function ( value ) {
mode = value;
switch ( mode ) {
case 0:
fpsDiv.style.display = 'block';
msDiv.style.display = 'none';
break;
case 1:
fpsDiv.style.display = 'none';
msDiv.style.display = 'block';
break;
}
}
var updateGraph = function ( dom, value ) {
var child = dom.appendChild( dom.firstChild );
child.style.height = value + 'px';
}
return {
REVISION: 11,
domElement: container,
setMode: setMode,
begin: function () {
startTime = Date.now();
},
end: function () {
var time = Date.now();
ms = time - startTime;
msMin = Math.min( msMin, ms );
msMax = Math.max( msMax, ms );
msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
frames ++;
if ( time > prevTime + 1000 ) {
fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
fpsMin = Math.min( fpsMin, fps );
fpsMax = Math.max( fpsMax, fps );
fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
prevTime = time;
frames = 0;
}
return time;
},
update: function () {
startTime = this.end();
}
}
};
[/c]
The code below demonstrates the index.html file as shown below.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Intro to WebGL with three.js</title>
</head>
<body>
<div id="webgl-container"></div>
<script src="scripts/three.js"></script>
<script src="scripts/stats.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
[/c]
Result
By running the above code in a preferred browser, user will get the output as shown below.
Key Points
- WebGL Meshes and Geometry In custom Geometry user can create own shapes.
- WebGL Meshes and Geometry User can modify the inbuilt Geometry.
- WebGL Meshes and Geometry Three.js have many geometries.