In the last tutorial, I promised to show to use heightmaps. While playing around with that, I realised that the camera set up to now is inadequate to navigate through the scene. This is not quite a trivial operation, so have decided to insert a tutorial on setting up the camera here.
The new controls for the camera, will rotate the world view as you move around the screen, much like a first person shooter. Using the WASD keys, you can go forwards and back, and left and right. this allows us to simulate “flying” around our scene.
First off we have added quite a bit of global variables
var g_lastMouseX = 0; var g_lastMouseY = 0; var g_mouseXDelta = 0; var g_mouseYDelta = 0; var g_rotationDelta = 0.002; var g_translationDelta = 0.2; var g_mouseLocked = false; var g_lookingDir = [0, 0, 0];
First, on mouse click, we set a flag saying that we are moving our view. This is because we don’t want the screen looking in any direction unless we want it to. So to start moving the view, you just need to click once. So in the mousedown function we add.
g_mouseLocked = !g_mouseLocked
Most of the action happens in the mouseMove function. We get the mouse coordinates, and then if the screen is locked into drag mode, we apply the transformation to move the screen. How this is done, is we need to work out our view direction, which is the location of the target minus the location of the eye. We then apply the formula to rotate the vector an angle specified by g_rotationDelta multiplied by the distance moved since the last update. We then add back the location of the eye so that we can set the new target, and finally update the view with the new target location.
function mouseMove(e) {
g_lastMouseX = g_mouseX;
g_lastMouseY = g_mouseY;
g_mouseX = e.x;
g_mouseY = e.y;
g_mouseXDelta = g_mouseX - g_lastMouseX;
g_mouseYDelta = g_mouseY - g_lastMouseY;
if (g_mouseLocked) {
var viewDir = g_math.subVector(g_camera.target, g_camera.eye);
var rotatedViewDir = [];
rotatedViewDir[0] = (Math.cos(g_mouseXDelta * g_rotationDelta) * viewDir[0]) - (Math.sin(g_mouseXDelta * g_rotationDelta) * viewDir[2]);
rotatedViewDir[1] = viewDir[1];
rotatedViewDir[2] = (Math.cos(g_mouseXDelta * g_rotationDelta) * viewDir[2]) + (Math.sin(g_mouseXDelta * g_rotationDelta) * viewDir[0]);
viewDir = rotatedViewDir;
rotatedViewDir[0] = viewDir[0];
rotatedViewDir[1] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]) - (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]);
rotatedViewDir[2] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]) + (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]);
g_lookingDir = rotatedViewDir;
g_camera.target = g_math.addVector(rotatedViewDir, g_camera.eye);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
}
}
Next, the keyPressedAction function has been modified. Pressing ‘a’ or ‘d’ moves the camera left or right, and ‘w’ or ‘s’ moves the camera forwards and backwards. This takes into account the view direction, as we need to move in the correct manner, so we work out which way we are looking, apply the translation, and then add back the target, and finally setting the view. For the sideways translation, we need to update both the eye and target locations or else our view direction will drift.
function keyPressedAction(keyPressed, delta) {
var actionTaken = false;
switch(keyPressed) {
case 'a':
var eyeOriginal = g_camera.eye;
var targetOriginal = g_camera.target;
var viewEye = g_math.subVector(g_camera.eye, g_camera.target);
var viewTarget = g_math.subVector(g_camera.target, g_camera.eye);
viewEye = g_math.addVector([g_translationDelta * -1, 0, 0], viewEye);
viewTarget = g_math.addVector([g_translationDelta * -1, 0, 0], viewTarget);
g_camera.eye = g_math.addVector(viewEye, targetOriginal);
g_camera.target = g_math.addVector(viewTarget, eyeOriginal);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
actionTaken = true;
break;
case 'd':
var eyeOriginal = g_camera.eye;
var targetOriginal = g_camera.target;
var viewEye = g_math.subVector(g_camera.eye, g_camera.target);
var viewTarget = g_math.subVector(g_camera.target, g_camera.eye);
viewEye = g_math.addVector([g_translationDelta, 0, 0], viewEye);
viewTarget = g_math.addVector([g_translationDelta, 0, 0], viewTarget);
g_camera.eye = g_math.addVector(viewEye, targetOriginal);
g_camera.target = g_math.addVector(viewTarget, eyeOriginal);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
actionTaken = true;
break;
case 'w':
var view = g_math.subVector(g_camera.eye, g_camera.target);
view = g_math.mulScalarVector( 11 / 12, view);
g_camera.eye = g_math.addVector(view, g_camera.target);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
actionTaken = true;
break;
case 's':
var view = g_math.subVector(g_camera.eye, g_camera.target);
view = g_math.mulScalarVector( 13 / 12, view);
g_camera.eye = g_math.addVector(view, g_camera.target);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
actionTaken = true;
break;
}
return actionTaken;
}
I have also modified the output panel to display the location of the eye, and the target, so we can see what is happening behind the scenes.
Here is the full listing
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.canvas');
o3djs.require('o3djs.quaternions');
o3djs.require('o3djs.event');
o3djs.require('o3djs.arcball');
o3djs.require('o3djs.primitives');
o3djs.require('o3djs.picking');
o3djs.require('o3djs.io');
o3djs.require('o3djs.pack');
o3djs.require('o3djs.scene');
// Events
// Run the init() function once the page has finished loading.
// Run the uninit() function when the page has is unloaded.
window.onload = init;
window.onunload = uninit;
// global variables
var g_o3dElement;
var g_o3d;
var g_math;
var g_client;
var g_pack;
var g_clock = 0;
var g_timeMult = 1;
var g_cubeTransform;
var g_textCanvas;
var g_paint;
var g_canvasLib;
var g_3dRoot;
var g_hudRoot;
var g_viewInfo;
var g_hudViewInfo;
var g_keyPressDelta = 0.05;
var g_quaternions;
var g_aball;
var g_thisRot;
var g_lastRot;
var g_dragging = false;
var g_lightPosition = [5, 5, 7];
var g_camera = {
eye: [0, 0, 10],
target: [0, 0, 0]
};
var g_mouseX = 0;
var g_mouseY = 0;
var g_spinningObject = false;
var g_pickedInfo;
var g_treeInfo;
var g_sampler;
var g_backgroundCanvas;
var g_backgroundRoot;
var g_backgroundViewInfo;
var g_backgroundCanvasLib;
var g_backgroundTexture;
var g_lastMouseX = 0;
var g_lastMouseY = 0;
var g_mouseXDelta = 0;
var g_mouseYDelta = 0;
var g_rotationDelta = 0.002;
var g_translationDelta = 0.2;
var g_mouseLocked = false;
var g_lookingDir = [0, 0, 0];
//Event handler for the mousedown event
function mouseDown(e) {
if (e.button == 0) {
var worldRay = o3djs.picking.clientPositionToWorldRay(
e.x,
e.y,
g_viewInfo.drawContext,
g_client.width,
g_client.height);
g_treeInfo.update();
g_pickedInfo = g_treeInfo.pick(worldRay);
if (g_pickedInfo) {
g_spinningObject = true;
}
} else {
g_lastRot = g_thisRot;
g_aball.click([e.x, e.y]);
g_dragging = true;
}
g_mouseLocked = !g_mouseLocked
}
//Event handler for the mousemove event
function mouseMove(e) {
g_lastMouseX = g_mouseX;
g_lastMouseY = g_mouseY;
g_mouseX = e.x;
g_mouseY = e.y;
g_mouseXDelta = g_mouseX - g_lastMouseX;
g_mouseYDelta = g_mouseY - g_lastMouseY;
if (g_mouseLocked) {
var viewDir = g_math.subVector(g_camera.target, g_camera.eye);
var rotatedViewDir = [];
rotatedViewDir[0] = (Math.cos(g_mouseXDelta * g_rotationDelta) * viewDir[0]) - (Math.sin(g_mouseXDelta * g_rotationDelta) * viewDir[2]);
rotatedViewDir[1] = viewDir[1];
rotatedViewDir[2] = (Math.cos(g_mouseXDelta * g_rotationDelta) * viewDir[2]) + (Math.sin(g_mouseXDelta * g_rotationDelta) * viewDir[0]);
viewDir = rotatedViewDir;
rotatedViewDir[0] = viewDir[0];
rotatedViewDir[1] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]) - (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]);
rotatedViewDir[2] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]) + (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]);
g_lookingDir = rotatedViewDir;
g_camera.target = g_math.addVector(rotatedViewDir, g_camera.eye);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
}
}
//Event handler for the mouseup event
function mouseUp(e) {
g_dragging = false;
g_spinningObject = false;
}
//Even handler for the scroll button
function scrollMe(e) {
if (e.deltaY) {
var view = g_math.subVector(g_camera.eye, g_camera.target);
view = g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12, view);
g_camera.eye = g_math.addVector(view, g_camera.target);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
}
}
// Updates the transform info for our scene
function updateInfo() {
if (!g_treeInfo) {
g_treeInfo = o3djs.picking.createTransformInfo(g_3dRoot, null);
}
g_treeInfo.update();
}
function drawText(str) {
g_textCanvas.canvas.clear([0.5, 0.5, 0.5, 0.5]);
// Reuse the global paint object
var paint = g_paint;
paint.color = [1, 1, 1, 1];
paint.textSize = 12;
paint.textTypeface = 'Comic Sans MS';
paint.textAlign = g_o3d.CanvasPaint.LEFT;
paint.shader = null;
g_textCanvas.canvas.drawText(str, 10, 30, paint);
g_textCanvas.updateTexture();
}
/**
* This method gets called every time O3D renders a frame. Here's
* where we update the cube's transform to make it spin.
* @param {o3d.RenderEvent} renderEvent The render event object that
* gives us the elapsed time since the last time a frame was rendered.
*/
function renderCallback(renderEvent) {
g_clock += renderEvent.elapsedTime * g_timeMult;
g_camera.eye
drawText("(" + (Math.round(g_camera.eye[0] * 100) / 100) + "," + (Math.round(g_camera.eye[1] * 100) / 100) +"," + (Math.round(g_camera.eye[2] * 100) / 100) + ") " + "(" + (Math.round(g_lookingDir[0] * 100) / 100) + "," + (Math.round(g_lookingDir[1] * 100) / 100) +"," + (Math.round(g_lookingDir[2] * 100) / 100) + ")");
if (g_spinningObject) {
var pickTrans = g_pickedInfo.shapeInfo.parent.transform;
pickTrans.rotateX(0.05);
pickTrans.rotateY(0.05);
}
updateInfo();
}
/**
* Function performing the rotate action in response to a key-press.
* Rotates the scene based on key pressed. (w ,s, a, d). Note that the
* x,y-axis referenced here are relative to the current view of scene.
* @param {keyPressed} The letter pressed, in lower case.
* @param {delta} The angle by which the scene should be rotated.
* @return true if an action was taken.
*/
function keyPressedAction(keyPressed, delta) {
var actionTaken = false;
switch(keyPressed) {
case 'a':
var eyeOriginal = g_camera.eye;
var targetOriginal = g_camera.target;
var viewEye = g_math.subVector(g_camera.eye, g_camera.target);
var viewTarget = g_math.subVector(g_camera.target, g_camera.eye);
viewEye = g_math.addVector([g_translationDelta * -1, 0, 0], viewEye);
viewTarget = g_math.addVector([g_translationDelta * -1, 0, 0], viewTarget);
g_camera.eye = g_math.addVector(viewEye, targetOriginal);
g_camera.target = g_math.addVector(viewTarget, eyeOriginal);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
actionTaken = true;
break;
case 'd':
var eyeOriginal = g_camera.eye;
var targetOriginal = g_camera.target;
var viewEye = g_math.subVector(g_camera.eye, g_camera.target);
var viewTarget = g_math.subVector(g_camera.target, g_camera.eye);
viewEye = g_math.addVector([g_translationDelta, 0, 0], viewEye);
viewTarget = g_math.addVector([g_translationDelta, 0, 0], viewTarget);
g_camera.eye = g_math.addVector(viewEye, targetOriginal);
g_camera.target = g_math.addVector(viewTarget, eyeOriginal);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
actionTaken = true;
break;
case 'w':
var view = g_math.subVector(g_camera.eye, g_camera.target);
view = g_math.mulScalarVector( 11 / 12, view);
g_camera.eye = g_math.addVector(view, g_camera.target);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
actionTaken = true;
break;
case 's':
var view = g_math.subVector(g_camera.eye, g_camera.target);
view = g_math.mulScalarVector( 13 / 12, view);
g_camera.eye = g_math.addVector(view, g_camera.target);
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
g_camera.target,
[0, 1, 0]);
actionTaken = true;
break;
}
return actionTaken;
}
/**
* Callback for the keypress event.
* Invokes the action to be performed for the key pressed.
* @param {event} keyPress event passed to us by javascript.
*/
function keyPressedCallback(event) {
event = event || window.event;
// Ignore accelerator key messages.
if (event.metaKey)
return;
var keyChar =String.fromCharCode(o3djs.event.getEventKeyChar(event));
// Just in case they have capslock on.
keyChar = keyChar.toLowerCase();
if (keyPressedAction(keyChar, g_keyPressDelta)) {
o3djs.event.cancel(event);
}
}
/**
* Creates a phong material based on the given single color.
* @param {Array} baseColor An array with 4 entries, the R,G,B, and A components
* of a color.
* @return {Material} A phong material whose overall pigment is baseColor.
*/
function createPhongMaterial(baseColor) {
// Create a new, empty Material object.
var material = g_pack.createObject('Material');
o3djs.effect.attachStandardShader(
g_pack, material, g_lightPosition, 'phong');
material.drawList = g_viewInfo.performanceDrawList;
// Assign parameters to the phong material.
material.getParam('emissive').value = [0, 0, 0, 1];
material.getParam('ambient').value = g_math.mulScalarVector(0.1, baseColor);
material.getParam('diffuse').value = g_math.mulScalarVector(0.9, baseColor);
material.getParam('specular').value = [.2, .2, .2, 1];
material.getParam('shininess').value = 20;
return material;
}
function createShapes(material) {
var cube = o3djs.primitives.createCube(
g_pack,
material,
Math.sqrt(2)); // The length of each side of the cube.
var sphere = o3djs.primitives.createSphere(
g_pack,
createPhongMaterial([1, 1, 0, 1]),
1.0, // Radius of the sphere.
30, // Number of meridians.
20); // Number of parallels.
var cylinder = o3djs.primitives.createCylinder(
g_pack,
createPhongMaterial([0, 1, 0, 1]),
0.5, // Radius.
1.5, // Depth.
20, // Number of radial subdivisions.
20); // Number of vertical subdivisions.
var plane = o3djs.primitives.createPlane(
g_pack,
createPhongMaterial([0, 0, 1, 1]),
1, // Width.
1.618, // Depth.
3, // Horizontal subdivisions.
3); // Vertical subdivisions.
// Make a polygon to extrude for the prism.
var polygon = [];
var n = 10;
for (var i = 0; i < n; ++i) {
var theta = 2.0 * i * Math.PI / n;
var radius = (i % 2) ? 1 : 0.382;
polygon.push([radius * Math.cos(theta), radius * Math.sin(theta)]);
}
var prism = o3djs.primitives.createPrism(
g_pack,
createPhongMaterial([0, 1, 1, 1]),
polygon, // The profile polygon to be extruded.
1); // The depth of the extrusion.
var disc = o3djs.primitives.createDisc(
g_pack,
createPhongMaterial([1, 0, 1, 1]),
1, // Radius.
7, // Divisions.
2, // Stacks (optional).
0, // Start Stack (optional).
2); // Stack Power (optional).
// Add the shapes to the transforms.
var transformTable = [
{shape: cube, translation: [-2, 1, -3]},
{shape: sphere, translation: [0, 1, -3]},
{shape: cylinder, translation: [2, 1, -3]},
{shape: plane, translation: [-2, -1, -3]},
{shape: prism, translation: [0, -1, -3]},
{shape: disc, translation: [2, -1, -3]}
];
for (var i = 0; i < transformTable.length; i++) {
var transform = g_pack.createObject('Transform');
transform.addShape(transformTable[i].shape);
transform.translate(transformTable[i].translation);
transform.parent = g_3dRoot;
}
}
/**
* Loads a scene into the transform graph.
* @param {!o3d.Pack} pack Pack to load scene into.
* @param {string} fileName filename of the scene.
* @param {!o3d.Transform} parent parent node in the transform graph to
* which to load the scene into.
*/
function loadScene(pack, fileName, parent) {
// Get our full path to the scene
var scenePath = o3djs.util.getCurrentURI() + fileName;
// Load the file given the full path, and call the callback function
// when its done loading.
o3djs.scene.loadScene(g_client, pack, parent, scenePath, callback);
/**
* Our callback is called once the scene has been loaded into memory
* from the web or locally.
* @param {!o3d.Pack} pack The pack that was passed in above.
* @param {!o3d.Transform} parent The parent that was passed in above.
* @param {*} exception null if loading succeeded.
*/
function callback(pack, parent, exception) {
if (exception) {
alert('Could not load: ' + fileName + '\n' + exception);
return;
}
// Generate draw elements and setup material draw lists.
o3djs.pack.preparePack(pack, g_viewInfo);
}
}
/**
* Creates the client area.
*/
function init() {
o3djs.util.makeClients(initStep2);
}
/**
* Initializes O3D.
* @param {Array} clientElements Array of o3d object elements.
*/
function initStep2(clientElements) {
// Initializes global variables and libraries.
g_o3dElement = clientElements[0];
g_client = g_o3dElement.client;
g_o3d = g_o3dElement.o3d;
g_math = o3djs.math;
g_quaternions = o3djs.quaternions;
// Initialize O3D sample libraries.
o3djs.base.init(g_o3dElement);
// Create a pack to manage the objects created.
g_pack = g_client.createPack();
//Create the arcball which is used for the rotation
g_aball = o3djs.arcball.create(400, 400);
//Initialise rotation matrixes
g_lastRot = g_math.matrix4.identity();
g_thisRot = g_math.matrix4.identity();
// Create 2 root transforms, one for the 3d parts and 2d parts.
// This is not strictly neccassary but it is helpful.
g_3dRoot = g_pack.createObject('Transform');
g_hudRoot = g_pack.createObject('Transform');
g_backgroundRoot = g_pack.createObject('Transform');
// Create the render graph for a view.
g_viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_3dRoot,
g_client.renderGraphRoot);
// Create a second view for the hud.
g_hudViewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_hudRoot,
g_client.renderGraphRoot);
// Turn off clearing the color for the hud since that would erase the
// 3d parts but leave clearing the depth and stencil so the HUD is
// unaffected by anything done by the 3d parts.
g_hudViewInfo.clearBuffer.clearColorFlag = false;
g_viewInfo.clearBuffer.clearColorFlag = false;
// Create a view for the background.
g_backgroundViewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_backgroundRoot,
g_client.renderGraphRoot);
// Make sure the background gets drawn first
g_viewInfo.root.priority = g_backgroundViewInfo.root.priority + 1;
// Make sure the hud gets drawn after the 3d stuff
g_hudViewInfo.root.priority = g_viewInfo.root.priority + 1;
//g_backgroundViewInfo.root.priority + 5;
// Set up a perspective view
g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), // 30 degree fov.
g_client.width / g_client.height,
1, // Near plane.
5000); // Far plane.
// Set up our view transformation to look towards the world origin
// where the cube is located.
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye, //eye
g_camera.target, // target
[0, 1, 0]); // up
//Set up the 2d orthographic view
g_hudViewInfo.drawContext.projection = g_math.matrix4.orthographic(
0 + 0.5,
g_client.width + 0.5,
g_client.height + 0.5,
0 + 0.5,
0.001,
1000);
g_hudViewInfo.drawContext.view = g_math.matrix4.lookAt(
[0, 0, 1], // eye
[0, 0, 0], // target
[0, 1, 0]); // up
//Set up the 2d orthographic view
g_backgroundViewInfo.drawContext.projection = g_math.matrix4.orthographic(
0 + 0.5,
g_client.width + 0.5,
g_client.height + 0.5,
0 + 0.5,
0.001,
1000);
g_backgroundViewInfo.drawContext.view = g_math.matrix4.lookAt(
[0, 0, 1], // eye
[0, 0, 0], // target
[0, 1, 0]); // up
// Load the scene into the transform graph as a child of the g_sceneRoot.
loadScene(g_pack, 'tutorial15/teapot.o3dtgz', g_3dRoot);
// Load effect
var cubeEffect = g_pack.createObject('Effect');
var shaderString = 'shaders/texture.shader';
o3djs.effect.loadEffect(cubeEffect, shaderString);
// Create a Material for the mesh.
var cubeMaterial = g_pack.createObject('Material');
// Set the material's drawList.
cubeMaterial.drawList = g_viewInfo.performanceDrawList;
// Apply our effect to this material. The effect tells the 3D hardware
// which shaders to use.
cubeMaterial.effect = cubeEffect;
// Create an O3D Param on the material for every uniform used by the
// shader.
cubeEffect.createUniformParameters(cubeMaterial);
// Get the material's sampler parameter so that we can set the texture value
// to it.
var samplerParam = cubeMaterial.getParam('texSampler0');
// Create a Sampler object and set the min filtering to ANISOTROPIC. This
// will improve the quality of the rendered texture when viewed at an angle.
g_sampler = g_pack.createObject('Sampler');
g_sampler.minFilter = g_o3d.Sampler.ANISOTROPIC;
g_sampler.maxAnisotropy = 4;
samplerParam.value = g_sampler;
o3djs.io.loadTexture(g_pack, 'tutorial15/image.png',
function(texture, exception) {
if (exception) {
g_sampler.texture = null;
} else {
// Set the texture on the sampler object to the newly created texture
// object returned by the request.
g_sampler.texture = texture;
// We can add shapes now that the texture is loaded
createShapes(cubeMaterial);
}
});
// Create the global paint object that's used by draw operations.
g_paint = g_pack.createObject('CanvasPaint');
// Creates an instance of the canvas utilities library.
g_canvasLib = o3djs.canvas.create(g_pack, g_hudRoot, g_hudViewInfo);
// Create a canvas that will be used to display the text.
g_textCanvas = g_canvasLib.createXYQuad(0, 0, 0, 400, 50, true);
g_backgroundCanvasLib = o3djs.canvas.create(g_pack, g_backgroundRoot, g_backgroundViewInfo);
g_backgroundCanvas = g_backgroundCanvasLib.createXYQuad(0, 0, 0, g_client.width, g_client.height, true);
g_backgroundCanvas.canvas.clear([0, 0, 0, 1]);
o3djs.io.loadTexture(g_pack, 'tutorial15/bg.jpg', function(texture, exception) {
if (exception) {
alert(exception);
} else {
if (g_backgroundTexture) {
g_pack.removeObject(g_backgroundTexture);
}
g_backgroundTexture = texture;
g_backgroundCanvas.canvas.drawBitmap(g_backgroundTexture, 0, g_client.width);
g_backgroundCanvas.updateTexture();
}
});
// Set our render callback for animation.
// This sets a function to be executed every time frame is rendered.
g_client.setRenderCallback(renderCallback);
//Set up a callback to interpret keypresses
window.document.onkeypress = keyPressedCallback;
//Set up mouse events
o3djs.event.addEventListener(g_o3dElement, 'mousedown', mouseDown);
o3djs.event.addEventListener(g_o3dElement, 'mousemove', mouseMove);
o3djs.event.addEventListener(g_o3dElement, 'mouseup', mouseUp);
o3djs.event.addEventListener(g_o3dElement, 'wheel', scrollMe);
}
/**
* Removes callbacks so they aren't called after the page has unloaded.
*/
function uninit() {
if (g_client) {
g_client.cleanup();
}
}
Comments