[NaCl SDK] Bullet demo: improve grabbing of objects.

You don't have to hold the 'h' key anymore. Just click and drag.

BUG=none
R=sbc@chromium.org

Review URL: https://codereview.chromium.org/46883012

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@231639 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 28 insertions, 26 deletions

diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/index.html b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/index.html
index 3ab6eab..7af7346 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/index.html
@@ -61,8 +61,8 @@ found in the LICENSE file.
           <button id="reload">Reload Scene</button>
         </div>
         <ul>
-          <li>Hold "h" to pick up an object</li>
-          <li>Click and drag to rotate the camera</li>
+          <li>Click and drag an object to move it</li>
+          <li>Click and drag elsewhere to rotate the camera</li>
           <li>Use the mousewheel to zoom in/out</li>
         </ul>
         <p class="small">
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/scene.js b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/scene.js
index 6740155..27ae546 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/scene.js
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/scene.js
@@ -194,8 +194,6 @@ function init() {
 
   rendererContainer.appendChild(renderer.domElement);
 
-  controls = new THREE.OrbitControls (camera, rendererContainer);
-
   var idFuncHash = {
     jenga10: loadJenga10,
     jenga20: loadJenga20,
@@ -213,9 +211,13 @@ function init() {
 
   $('reload').addEventListener('click', reloadScene, false);
 
-  renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false );
-  window.addEventListener('keydown', onDocumentKeyDown, false);
-  window.addEventListener('keyup', onDocumentKeyUp, false);
+  rendererContainer.addEventListener('mousedown', onMouseDown, false);
+  rendererContainer.addEventListener('mouseup', onMouseUp, false);
+  renderer.domElement.addEventListener('mousemove', onMouseMove, false);
+
+  // Add the OrbitControls after our own listeners -- that way we can prevent
+  // the camera rotation when dragging an object.
+  controls = new THREE.OrbitControls(camera, rendererContainer);
 
   window.setInterval(pollForRendererResize, 10);
 }
@@ -234,35 +236,35 @@ function pollForRendererResize() {
   lastRendererHeight = h;
 }
 
-function onDocumentKeyDown(event) {
-  if (event.keyCode == 72 || event.keyCode == 104) {
-    if (SELECTED != undefined) {
-      return;
-    }
-    hold = true;
-    var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
-    projector.unprojectVector( vector, camera );
-    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
-    var intersects = ray.intersectObjects( objects );
-    if (intersects.length > 0) {
-      if (intersects[0].object != plane) {
-        SELECTED = intersects[0].object;
-        //console.log(SELECTED.objectTableIndex);
-        NaClAMBulletPickObject(SELECTED.objectTableIndex, camera.position, intersects[0].point);
-      }
+function onMouseDown(event) {
+  var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
+  projector.unprojectVector( vector, camera );
+  var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
+  var intersects = ray.intersectObjects( objects );
+  if (intersects.length > 0) {
+    if (intersects[0].object != plane) {
+      hold = true;
+      SELECTED = intersects[0].object;
+      //console.log(SELECTED.objectTableIndex);
+      NaClAMBulletPickObject(SELECTED.objectTableIndex, camera.position, intersects[0].point);
+      // stopImmediatePropagation() will prevent other event listeners on the
+      // same element from firing -- in this case, the OrbitControls camera
+      // rotation.
+      event.stopImmediatePropagation();
     }
   }
 }
 
-function onDocumentKeyUp(event) {
-  if (event.keyCode == 72 || event.keyCode == 104) {
+function onMouseUp(event) {
+  if (hold) {
     hold = false;
     SELECTED = undefined;
     NaClAMBulletDropObject();
+    event.stopImmediatePropagation();
   }
 }
 
-function onDocumentMouseMove( event ) {
+function onMouseMove( event ) {
   event.preventDefault();
 
   var rendererContainer = $('rendererContainer');