Introduction
This chapter demonstrates about the WebGL 3D Object which is base class for the many objects which contains the number of methods, following are the concepts covered in this chapter.
- About 3D Object
- Properties of 3D Object
- Methods of 3D Objects
Description
In Three.JS Object3D is the base class for the many of the objects which contains the number of methods and properties. In Three.js documentation which contains number methods and properties in which some are makes quality documentation and some are not documented. If user can click on the document then user can get the source code for these user need to visit the official web site Three.js as shown in the image below.
If user click on the Documents, a window get appear with Docs and few other options as shown in below image.
Description
There are some important properties of 3D Objects demonstrated below.
- id id is the unique number of the objects instance and these are automatically assigned by Three.JS and user can retrieve properties by using id.
- uuid uuid is a unique identifier which is also created by Three.js.
- Name Name property is used to retrieve the objects by name.
- poisition Which represent object current location.
- userData Allows to hold the metadata or information on an object instance.
- parent/childern Objects in Three.JS are hierarchical and contain unlimited number of childern and allows user to navigate the hierarchy.
Description
3D Object have some important methods which are useful in lot of applications.
Three.js user can get from the official site of Three.js and click on download.
The code below demonstrates the App.js code as shown below.
[c]
var example = (function(){
"use strict";
var scene=new THREE.Scene(),
renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(),
light= new THREE.AmbientLight(0xffffff),
camera,
box;
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= 100;
scene.add( camera );
box = new THREE.Mesh(
new THREE.BoxGeometry(20,20,20),
new THREE.MeshBasicMaterial({color: 0xFF0000})
);
box.name="box";
scene.add(box);
render();
}
function render(){
box.rotation.y +=0.01;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
window.onload = initScene;
return {
scene: scene
}
})();
[/c]
The code below demonstrates the HelloWorld.html as shown below.
[c]
<!DOCTYPE html>
<html>
<head>
<title>WebGL with three.js Fundamentals</title>
</head>
<body>
<div id="webgl-container"></div>
<script src="scripts/three.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
[/c]
Result
By running the above code in a preferred browser then user get the output as shown below.
Now inspect the Output image and the open the Console then type example to get the id's and reference elements which are shown in below image.
In order to get the individual items user need to type the
var box=example.scene.getObjectById
now the user get undefined alert, type the item i.e Box , the individual item details can be obtained as shown in below image.
User can also change the the positions of the Box by adjusting the Co-ordinate values. The image below demonstrates changing the position of the Box by adjusting the position like box.poisition.y=15.
The below image demonstrates adjusting the position with the x coordinate as shown below.
- getObjectByName getObjectByName allows user to retrieve an individual object by its name.
- getObjectById which is similar to name but which searches for an object by id.
Key Points
- All the documents are available in Threejs.org.
- User can get the complete id details of the items.
- User can adjust the Box position by adjusting the coordinates.