| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 Copyright 2009, Google Inc. |
| 3 All rights reserved. |
| 4 |
| 5 Redistribution and use in source and binary forms, with or without |
| 6 modification, are permitted provided that the following conditions are |
| 7 met: |
| 8 |
| 9 * Redistributions of source code must retain the above copyright |
| 10 notice, this list of conditions and the following disclaimer. |
| 11 * Redistributions in binary form must reproduce the above |
| 12 copyright notice, this list of conditions and the following disclaimer |
| 13 in the documentation and/or other materials provided with the |
| 14 distribution. |
| 15 * Neither the name of Google Inc. nor the names of its |
| 16 contributors may be used to endorse or promote products derived from |
| 17 this software without specific prior written permission. |
| 18 |
| 19 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 20 "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 21 LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 22 A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 23 OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 24 SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 25 LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 26 DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 27 THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 28 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 29 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 30 --> |
| 31 |
| 32 <!-- |
| 33 O3D Tutorial A2 |
| 34 |
| 35 In this tutorial, we show how to perform transformations on a scene that |
| 36 we have loaded. |
| 37 --> |
| 38 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 39 "http://www.w3.org/TR/html4/loose.dtd"> |
| 40 <html> |
| 41 <head> |
| 42 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 43 <title> |
| 44 Tutorial A2: Transformations |
| 45 </title> |
| 46 <!-- Include sample javascript library functions--> |
| 47 <script type="text/javascript" src="../o3d-webgl/base.js"></script> |
| 48 <script type="text/javascript" src="../o3djs/base.js"></script> |
| 49 <!-- Our javascript code --> |
| 50 <script type="text/javascript" id="o3dscript"> |
| 51 o3djs.base.o3d = o3d; |
| 52 o3djs.require('o3djs.webgl'); |
| 53 o3djs.require('o3djs.camera'); |
| 54 o3djs.require('o3djs.math'); |
| 55 o3djs.require('o3djs.rendergraph'); |
| 56 o3djs.require('o3djs.pack'); |
| 57 o3djs.require('o3djs.scene'); |
| 58 |
| 59 // Events |
| 60 // Run the init() function once the page has finished loading. |
| 61 window.onload = init; |
| 62 |
| 63 // global variables |
| 64 var g_o3d; |
| 65 var g_math; |
| 66 var g_client; |
| 67 var g_viewInfo; |
| 68 var g_pack; |
| 69 var g_keyPressDelta = 0.05; |
| 70 var g_finished = false; // for selenium testing |
| 71 |
| 72 // root node of scene |
| 73 var g_sceneRoot; |
| 74 |
| 75 /** |
| 76 * Loads a scene into the transform graph. |
| 77 * @param {!o3d.Pack} pack Pack to load scene into. |
| 78 * @param {string} fileName filename of the scene. |
| 79 * @param {!o3d.Transform} parent parent node in the transform graph to |
| 80 * which to load the scene into. |
| 81 */ |
| 82 function loadScene(pack, fileName, parent) { |
| 83 // Get our full path to the scene |
| 84 var scenePath = o3djs.util.getCurrentURI() + fileName; |
| 85 |
| 86 // Load the file given the full path, and call the callback function |
| 87 // when its done loading. |
| 88 o3djs.scene.loadScene(g_client, pack, parent, scenePath, callback); |
| 89 |
| 90 /** |
| 91 * Our callback is called once the scene has been loaded into memory |
| 92 * from the web or locally. |
| 93 * @param {!o3d.Pack} pack The pack that was passed in above. |
| 94 * @param {!o3d.Transform} parent The parent that was passed in above. |
| 95 * @param {*} exception null if loading succeeded. |
| 96 */ |
| 97 function callback(pack, parent, exception) { |
| 98 if (exception) { |
| 99 alert('Could not load: ' + fileName + '\n' + exception); |
| 100 return; |
| 101 } |
| 102 // Get a CameraInfo (an object with a view and projection matrix) |
| 103 // using our javascript library function |
| 104 var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras( |
| 105 parent, |
| 106 g_client.width, |
| 107 g_client.height); |
| 108 |
| 109 // Copy the view and projection to the draw context. |
| 110 g_viewInfo.drawContext.view = cameraInfo.view; |
| 111 g_viewInfo.drawContext.projection = cameraInfo.projection; |
| 112 |
| 113 // Generate draw elements and setup material draw lists. |
| 114 o3djs.pack.preparePack(pack, g_viewInfo); |
| 115 |
| 116 g_finished = true; // for selenium testing |
| 117 } |
| 118 } |
| 119 |
| 120 /** |
| 121 * Creates the client area. |
| 122 */ |
| 123 function init() { |
| 124 o3djs.webgl.makeClients(initStep2); |
| 125 } |
| 126 |
| 127 /** |
| 128 * Initializes O3D and loads the scene into the transform graph. |
| 129 * @param {Array} clientElements Array of o3d object elements. |
| 130 */ |
| 131 function initStep2(clientElements) { |
| 132 // Initializes global variables and libraries. |
| 133 var o3dElement = clientElements[0]; |
| 134 g_o3d = o3dElement.o3d; |
| 135 g_math = o3djs.math; |
| 136 g_client = o3dElement.client; |
| 137 |
| 138 // Create a pack to manage our resources/assets |
| 139 g_pack = g_client.createPack(); |
| 140 |
| 141 // Create the render graph for a view. |
| 142 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 143 g_pack, |
| 144 g_client.root, |
| 145 g_client.renderGraphRoot); |
| 146 |
| 147 // Create a transform node to act as the 'root' of the scene |
| 148 g_sceneRoot = g_pack.createObject('Transform'); |
| 149 // Attach it to the root of the transform graph. |
| 150 g_sceneRoot.parent = g_client.root; |
| 151 |
| 152 // Load the scene into the transform graph as a child of the g_sceneRoot. |
| 153 loadScene(g_pack, '../assets/teapot/scene.json', g_sceneRoot); |
| 154 |
| 155 // Execute keyPressedCallback(..) when we detect a keypress on the document. |
| 156 window.document.onkeypress = keyPressedCallback; |
| 157 } |
| 158 |
| 159 /** |
| 160 * Function performing the rotate action in response to a key-press. |
| 161 * Rotates the scene based on key pressed. (w ,s, a, d). Note that the x and |
| 162 * y-axis referenced here are relative to the current view of the scene. |
| 163 * @param {keyPressed} The letter pressed, in lower case. |
| 164 * @param {delta} The angle by which the scene should be rotated. |
| 165 * @return true if an action was taken. |
| 166 */ |
| 167 function keyPressedAction(keyPressed, delta) { |
| 168 var actionTaken = false; |
| 169 switch(keyPressed) { |
| 170 case 'a': |
| 171 g_sceneRoot.localMatrix = |
| 172 g_math.matrix4.mul(g_sceneRoot.localMatrix, |
| 173 g_math.matrix4.rotationY(-delta)); |
| 174 actionTaken = true; |
| 175 break; |
| 176 case 'd': |
| 177 g_sceneRoot.localMatrix = |
| 178 g_math.matrix4.mul(g_sceneRoot.localMatrix, |
| 179 g_math.matrix4.rotationY(delta)); |
| 180 actionTaken = true; |
| 181 break; |
| 182 case 'w': |
| 183 g_sceneRoot.localMatrix = |
| 184 g_math.matrix4.mul(g_sceneRoot.localMatrix, |
| 185 g_math.matrix4.rotationX(-delta)); |
| 186 actionTaken = true; |
| 187 break; |
| 188 case 's': |
| 189 g_sceneRoot.localMatrix = |
| 190 g_math.matrix4.mul(g_sceneRoot.localMatrix, |
| 191 g_math.matrix4.rotationX(delta)); |
| 192 actionTaken = true; |
| 193 break; |
| 194 } |
| 195 return actionTaken; |
| 196 } |
| 197 |
| 198 /** |
| 199 * Callback for the keypress event. |
| 200 * Invokes the action to be performed for the key pressed. |
| 201 * @param {event} keyPress event passed to us by javascript. |
| 202 */ |
| 203 function keyPressedCallback(event) { |
| 204 event = event || window.event; |
| 205 |
| 206 // Ignore accelerator key messages. |
| 207 if (event.metaKey) |
| 208 return; |
| 209 |
| 210 var keyChar = String.fromCharCode(o3djs.event.getEventKeyChar(event)); |
| 211 // Just in case they have capslock on. |
| 212 keyChar = keyChar.toLowerCase(); |
| 213 |
| 214 if (keyPressedAction(keyChar, g_keyPressDelta)) { |
| 215 o3djs.event.cancel(event); |
| 216 } |
| 217 } |
| 218 |
| 219 /** |
| 220 * Resets the view of the scene by resetting its local matrix to the identity |
| 221 * matrix. |
| 222 */ |
| 223 function resetView() { |
| 224 g_sceneRoot.identity(); |
| 225 } |
| 226 |
| 227 </script> |
| 228 </head> |
| 229 <body> |
| 230 <h1>Transformations</h1> |
| 231 This tutorial shows how to perform transformations on a scene that |
| 232 has been loaded. |
| 233 <br/> |
| 234 <!-- Start of O3D plugin --> |
| 235 <div id="o3d" style="width: 600px; height: 600px;"></div> |
| 236 <!-- End of O3D plugin --> |
| 237 <p>Use W, S, A, D to rotate.</p> |
| 238 <form name="default_form" action="#" method="get"> |
| 239 <input type="button" value="Reset view" onclick="resetView()" /> |
| 240 <input type="button" value="W" id="W" |
| 241 onclick="keyPressedAction('w', g_keyPressDelta);" /> |
| 242 <input type="button" value="S" id="S" |
| 243 onclick="keyPressedAction('s', g_keyPressDelta);" /> |
| 244 <input type="button" value="A" id="A" |
| 245 onclick="keyPressedAction('a', g_keyPressDelta);" /> |
| 246 <input type="button" value="D" id="D" |
| 247 onclick="keyPressedAction('d', g_keyPressDelta);" /> |
| 248 </form> |
| 249 </body> |
| 250 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
