This chapter demonstrates about WebGL Manipulating Objects these are of several types and are used to modify the objects, following are the concepts are covered in this chapter.

• Objects to Manipulate

In order to manipulate the object user need to change their position, modify their size and user need to rotate the objects. These are the manipulating objects which are briefly explained below.

There is a number of different ways to specify an object positions. User can specify its position on an individual axis like Object.position.x=value User can specify its position on all three axis like is shown below. Object.position.set(x,y,z) User can assign a new vector vector free object to specify an entirely new position is as shown below. Object.position=new THREE.Vector3(0,0,0);

In order to resize an object user need to use the Scale Property which is a declared as factor relative to the original size of the object which is defined as Object.scale.x=value For example an object has 10 units along its axis the user need to change the X axis scale to 2 the user need to make it as 20 units long similarly changing the X axis scale to 2.5 then make it as 25 units long. Changing an object is an important model which is imported from a 3D package. User can modify an object scale in a similar way, which can specify to an individual axis or on all three axis at once is shown below. Object.scale.set(x,y,z)

A Radian is measured by taking the center of the circle and then drawung a line to its edge which is known as distance R Now user need to draw a bit of string and wrap it around the edge of the circle which should be one radian it is roughly 6.28 radians in a circle which is 2 pi is as shown in below image. Converting Degrees to Radians In order to convert degrees to radians simply multiply the number of degrees by (pi/180) is as shown below. radians= degrees*(pi/180) In some cases user can simply multiple the number of radians by 180 and then divide by pi is as shown below. degrees=radians*(180/pi)

Rotation is known as the changing an objects scale or position which can be performed around the all three axis and which are manipulated using radians rather then degrees. rotation is as shown in below image. An object can be rotated on any bof three axis and eacg axis as pole stuck through the object. so with default positioning the y axis should run up and down on the screen and object spin around the pole is as shown in below image.

The code below demonstrates the manipulating objects in which cube rotated around the object which have the controls also by these controls user can change the X and Y directions and user can zoom in and zoom  out in many directions is as shown below. User need to use the Three.js which is available in the official site of Three.js and click on download. The code below demonstrates the App.js code is as shown below. [c] var demo = (function(){ "use strict"; var scene=new THREE.Scene(), light= new THREE.AmbientLight(0xffffff), light2= new THREE.PointLight(0xffffff), camera, renderer = new THREE.WebGLRenderer(), cube, cube2, cube3, plane, ground; 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); //ground var texture = THREE.ImageUtils.loadTexture('content/grasslight-big.jpg') //texture from three.js examples var planeMaterial = new THREE.MeshPhongMaterial( {map: texture, side: THREE.DoubleSide} ); plane = new THREE.Mesh( new THREE.PlaneGeometry(200, 200), planeMaterial); plane.rotation.x = 90 * (Math.PI/180); plane.position.y = -10; plane.name="plane"; scene.add(plane); //main cube cube = new THREE.Mesh( new THREE.BoxGeometry( 20, 20, 20), new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors })); cube.name="cube"; //spinning cube cube2 = new THREE.Mesh( new THREE.BoxGeometry( 2, 2, 2), new THREE.MeshBasicMaterial({color: 0xFF0000})); cube2.name="cube2"; cube2.position.x = -50; cube2.position.Y = 20; cube2.add(light2); scene.add(cube2); assignColorsToCube(cube); var cubeAxesHelper = new THREE.AxisHelper(50); cube.add(cubeAxesHelper); scene.add(cube); var axesHelper = new THREE.AxisHelper(300); scene.add(axesHelper); setupGui(); requestAnimationFrame(render); }; function assignColorsToCube(cube){ var colors = [ new THREE.Color("rgb(255,0,0)"), new THREE.Color("rgb(0,255,0)"), new THREE.Color("rgb(0,0,255)"), new THREE.Color("rgb(255,255,0)"), new THREE.Color("rgb(0,255,255)"), new THREE.Color("rgb(255,0,255)") ]; for (var i = 0; i <12; i+=2) { var color = colors[i/2]; //each cube face is made up of 2 triangles & we want same color for each cube.geometry.faces[i].color= color; cube.geometry.faces[i+1].color= color; } } function setupGui(){ //var cube = scene.getObjectByName('cube'); //note we could link the various object properties directly to the gui but this would prevent us from being able to modify them e.g. radians to degrees var itemsToControl = new function() { this.cameraXPos = camera.position.x, this.cameraYPos = camera.position.y, this.cameraZPos = camera.position.z; this.cameraXRotation = camera.rotation.x; this.cameraYRotation = camera.rotation.y; this.cameraZRotation = camera.rotation.z; this.cubeXPos = cube.position.x, this.cubeYPos = cube.position.y, this.cubeZPos = cube.position.z, this.cubeXRotation = cube.rotation.x; this.cubeYRotation = cube.rotation.y; this.cubeZRotation = cube.rotation.z; this.cubeXScale = cube.scale.x; this.cubeYScale = cube.scale.y; this.cubeZScale = cube.scale.z; }; var gui = new dat.GUI(); //camera var cameraXPos = gui.add(itemsToControl, 'cameraXPos', -200, 200); var cameraYPos = gui.add(itemsToControl, 'cameraYPos', -200, 200); var cameraZPos = gui.add(itemsToControl, 'cameraZPos', -400, 400); var cameraXRotation = gui.add(itemsToControl, 'cameraXRotation', 0, 360); var cameraYRotation = gui.add(itemsToControl, 'cameraYRotation', 0, 360); var cameraZRotation = gui.add(itemsToControl, 'cameraZRotation', 0, 360); cameraXPos.onChange(function(value){move(camera,'x',value)}); cameraYPos.onChange(function(value){move(camera,'y',value)}); cameraZPos.onChange(function(value){move(camera,'z',value)}); cameraXRotation.onChange(function(value){rotate(camera, 'x', value)}); cameraYRotation.onChange(function(value){rotate(camera, 'y', value)}); cameraZRotation.onChange(function(value){rotate(camera, 'z', value)}); //cube var cubeXPos = gui.add(itemsToControl, 'cubeXPos', -200, 200); var cubeYPos = gui.add(itemsToControl, 'cubeYPos', -200, 200); var cubeZPos = gui.add(itemsToControl, 'cubeZPos', -200, 200); var cubeXRotation = gui.add(itemsToControl, 'cubeXRotation', 0, 360); var cubeYRotation = gui.add(itemsToControl, 'cubeYRotation', 0, 360); var cubeZRotation = gui.add(itemsToControl, 'cubeZRotation', 0, 360); var cubeXScale = gui.add(itemsToControl, 'cubeXScale', 1, 10); var cubeYScale = gui.add(itemsToControl, 'cubeYScale', 1, 10); var cubeZScale = gui.add(itemsToControl, 'cubeZScale', 1, 10); cubeXPos.onChange(function(value){move(cube,'x',value)}); cubeYPos.onChange(function(value){move(cube,'y',value)}); cubeZPos.onChange(function(value){move(cube,'z',value)}); cubeXRotation.onChange(function(value){rotate(cube, 'x', value)}); cubeYRotation.onChange(function(value){rotate(cube, 'y', value)}); cubeZRotation.onChange(function(value){rotate(cube, 'z', value)}); cubeXScale.onChange(function(value){scale(cube, 'x', value)}); cubeYScale.onChange(function(value){scale(cube, 'y', value)}); cubeZScale.onChange(function(value){scale(cube, 'z', value)}); } function rotate(object, axis, value){ object.rotation[axis] = value * (Math.PI/180); } function move(item, axis, value){ item.position[axis] = value; } function scale(item, axis, value){ item.scale[axis] = value; } function render() { moveOrbitingCube(cube2); renderer.render(scene, camera); requestAnimationFrame(render); }; //math from http://stackoverflow.com/questions/10341581/javascript-threejs-equation-to-move-an-object-in-a-circle-around-a-central-y function moveOrbitingCube(object){ var theta = 0.05; //amount to rotate by var x = object.position.x; var z = object.position.z; object.position.x = x * Math.cos(theta) + z * Math.sin(theta); object.position.z = z * Math.cos(theta) - x * Math.sin(theta); } window.onload = initScene; return { scene: scene } })(); [/c] The code below demonstrates the HelloWorld.html is as shown below. [c] <!DOCTYPE html> <html> <head> <title>Intro to WebGL with three.js</title> <script type="text/javascript" src="scripts/dat.gui.min.js"></script> </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 will get the output is as shown below.

• User can specify the object position in any of the axis.
• Rotation is known as changing the object poisition.
• Changing an object imported from 3D package.