Add a mouse based cursor / raycaster and applies to the link traversal example (#2861)

dmarcos · web-flow · commit a4b91bcec6f2 · 2017-07-18T22:28:14.000-07:00
diff --git a/docs/components/cursor.md b/docs/components/cursor.md
@@ -82,6 +82,7 @@ AFRAME.registerComponent('cursor-listener', {
 | downEvents  | Array of additional events on the entity to *listen* to for triggering `mousedown` (e.g., `triggerdown` for vive-controls).  | []                               |
 | fuse        | Whether cursor is fuse-based.                                                                                              | false on desktop, true on mobile |
 | fuseTimeout | How long to wait (in milliseconds) before triggering a fuse-based click event.                                             | 1500                             |
+| rayOrigin     | Where the intersection ray is cast from (i.e.,entity or mouse) | entity
 | upEvents    | Array of additional events on the entity to *listen* to for triggering `mouseup` (e.g., `trackpadup` for daydream-controls). | []                               |
 
 To further customize the cursor component, we configure the cursor's dependency
diff --git a/docs/components/raycaster.md b/docs/components/raycaster.md
@@ -59,6 +59,8 @@ AFRAME.registerComponent('collider-check', {
 | origin    | Vector3 coordinate of where the ray should originate from relative to the entity's origin.                                                            | 0, 0, 0       |
 | recursive | Checks all children of objects if set. Else only checks intersections with root objects.                                                              | true          |
 | showLine  | Whether or not to display the raycaster visually with the [line component][line].                                                                                         | false          |
+| useWorldCoordinates  | Whether the raycaster origin and direction properties are specified in world coordinates.
+.                                                                                         | false          |
 
 ## Events
 
diff --git a/examples/index.html b/examples/index.html
@@ -187,6 +187,7 @@ <h2>Showcase</h2>
       <li><a href="showcase/composite/">Composite</a></li>
       <li><a href="showcase/curved-mockups/">Curved Mockups</a></li>
       <li><a href="showcase/dynamic-lights/">Dynamic Lights</a></li>
+      <li><a href="showcase/link-traversal/">Link Traversal</a></li>
       <li><a href="showcase/tracked-controls/">Tracked Controls</a></li>
       <li><a href="showcase/shopping/">Shopping</a></li>
       <li><a href="showcase/spheres-and-fog/">Spheres and Fog</a></li>
diff --git a/examples/showcase/link-traversal/city.html b/examples/showcase/link-traversal/city.html
@@ -6,24 +6,17 @@
     <meta name="description" content="Links – A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
     <script src="js/components/aframe-tooltip-component.js"></script>
+    <script src="js/components/camera-position.js"></script>
     <script src="js/components/ground.js"></script>
     <script src="js/components/link-controls.js"></script>
     <script src="shaders/skyGradient.js"></script>
   </head>
   <body>
-    <a-scene fog="color: #241417; near: 0; far: 30;">
+    <a-scene fog="color: #241417; near: 0; far: 30;" raycaster="far: 100; objects: [link];" cursor="rayOrigin: mouse" camera-position>
       <a-assets>
         <img id="thumbHome" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/home.png">
         <img id="thumbSunrise" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/sunrise.png">
         <img id="thumbMountains" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/mountains.png">
-        <a-mixin id="cursor"
-                 cursor="fuse: true; fuseTimeout: 1500"
-                 geometry="primitive: ring; radiusOuter: 0.015;
-                          radiusInner: 0.01; segmentsTheta: 32"
-                 material="color: yellow; shader: flat"
-                 raycaster="far: 30"
-                 position="0 0 -0.75"></a-mixin>
-        <a-mixin id="-hovering" material="color: springgreen"></a-mixin>
       </a-assets>
       <a-link href="index.html" position="-3.5 1.5 -1.0" image="#thumbHome"></a-link>
       <a-link href="sunrise.html" position="0 1.5 -1.0" image="#thumbSunrise"></a-link>
diff --git a/examples/showcase/link-traversal/index.html b/examples/showcase/link-traversal/index.html
@@ -2,16 +2,17 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Room Scale</title>
+    <title>Links</title>
     <meta name="description" content="Motion Capture Components – A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
     <script src="js/components/aframe-tooltip-component.js"></script>
+    <script src="js/components/camera-position.js"></script>
     <script src="js/components/ground.js"></script>
     <script src="js/components/link-controls.js"></script>
     <script src="shaders/skyGradient.js"></script>
   </head>
   <body>
-    <a-scene>
+    <a-scene raycaster="far: 100; objects: [link];" cursor="rayOrigin: mouse" camera-position>
       <a-assets>
         <img id="arena" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/aframeArena.png">
         <img id="thumbCity" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/city.png">
diff --git a/examples/showcase/link-traversal/js/components/camera-position.js b/examples/showcase/link-traversal/js/components/camera-position.js
@@ -0,0 +1,34 @@
+/* global AFRAME */
+AFRAME.registerComponent('camera-position', {
+  schema: {
+    mobile: {type: 'vec3', default: '0 1.6 3'},
+    desktop: {type: 'vec3', default: '0 1.6 3'}
+  },
+  init: function () {
+    this.onCameraSetActive = this.onCameraSetActive.bind(this);
+    this.resetCamera = this.resetCamera.bind(this);
+    this.el.addEventListener('camera-set-active', this.onCameraSetActive);
+    this.el.addEventListener('exit-vr', this.onCameraSetActive);
+    this.el.addEventListener('enter-vr', this.resetCamera);
+  },
+
+  onCameraSetActive: function () {
+    var cameraEl = this.el.camera.el;
+    var data = this.data;
+    var isMobile = AFRAME.utils.device.isMobile();
+    var position = isMobile ? data.mobile : data.desktop;
+    var savedPose = cameraEl.components.camera.savedPose;
+    if (savedPose) { savedPose.position.z = position.z; }
+    this.el.camera.el.setAttribute('position', position);
+  },
+
+  resetCamera: function () {
+    var cameraEl = this.el.camera.el;
+    var position = cameraEl.getAttribute('position');
+    cameraEl.setAttribute('position', {
+      x: position.x,
+      y: position.y,
+      z: 0
+    });
+  }
+});
diff --git a/examples/showcase/link-traversal/js/components/link-controls.js b/examples/showcase/link-traversal/js/components/link-controls.js
@@ -163,16 +163,16 @@ AFRAME.registerComponent('link-controls', {
   },
 
   play: function () {
-    var el = this.el;
-    el.addEventListener('mouseenter', this.onMouseEnter);
-    el.addEventListener('mouseleave', this.onMouseLeave);
+    var sceneEl = this.el.sceneEl;
+    sceneEl.addEventListener('mouseenter', this.onMouseEnter);
+    sceneEl.addEventListener('mouseleave', this.onMouseLeave);
     this.addControllerEventListeners();
   },
 
   pause: function () {
-    var el = this.el;
-    el.removeEventListener('mouseenter', this.onMouseEnter);
-    el.removeEventListener('mouseleave', this.onMouseLeave);
+    var sceneEl = this.el.sceneEl;
+    sceneEl.removeEventListener('mouseenter', this.onMouseEnter);
+    sceneEl.removeEventListener('mouseleave', this.onMouseLeave);
     this.removeControllerEventListeners();
   },
 
@@ -312,7 +312,7 @@ AFRAME.registerComponent('link-controls', {
     var previousSelectedLinkEl = this.selectedLinkEl;
     var selectedLinkEl = evt.detail.intersectedEl;
     var urlEl = this.urlEl;
-    if (previousSelectedLinkEl || selectedLinkEl.components.link === undefined) { return; }
+    if (!selectedLinkEl || previousSelectedLinkEl || selectedLinkEl.components.link === undefined) { return; }
     selectedLinkEl.setAttribute('link', 'highlighted', true);
     this.selectedLinkElPosition = selectedLinkEl.getAttribute('position');
     this.selectedLinkEl = selectedLinkEl;
@@ -325,7 +325,7 @@ AFRAME.registerComponent('link-controls', {
   onMouseLeave: function (evt) {
     var selectedLinkEl = this.selectedLinkEl;
     var urlEl = this.urlEl;
-    if (!selectedLinkEl) { return; }
+    if (!selectedLinkEl || !evt.detail.intersectedEl) { return; }
     selectedLinkEl.setAttribute('link', 'highlighted', false);
     this.selectedLinkEl = undefined;
     if (!urlEl) { return; }
diff --git a/examples/showcase/link-traversal/mountains.html b/examples/showcase/link-traversal/mountains.html
@@ -6,12 +6,13 @@
     <meta name="description" content="Links – A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
     <script src="js/components/aframe-tooltip-component.js"></script>
+    <script src="js/components/camera-position.js"></script>
     <script src="js/components/ground.js"></script>
     <script src="js/components/link-controls.js"></script>
     <script src="shaders/skyGradient.js"></script>
   </head>
   <body>
-    <a-scene fog="color: #47c9ff; near: 0; far: 65;">
+    <a-scene fog="color: #241417; near: 0; far: 30;" raycaster="far: 100; objects: [link];" cursor="rayOrigin: mouse" camera-position>
       <a-assets>
         <img id="thumbHome" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/home.png">
         <img id="thumbSunrise" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/sunrise.png">
diff --git a/examples/showcase/link-traversal/sunrise.html b/examples/showcase/link-traversal/sunrise.html
@@ -6,12 +6,13 @@
     <meta name="description" content="Links – A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
     <script src="js/components/aframe-tooltip-component.js"></script>
+    <script src="js/components/camera-position.js"></script>
     <script src="js/components/ground.js"></script>
     <script src="js/components/link-controls.js"></script>
     <script src="shaders/skyGradient.js"></script>
   </head>
   <body>
-    <a-scene fog="color: #bc483e; near: 0; far: 65;">
+    <a-scene fog="color: #241417; near: 0; far: 30;" raycaster="far: 100; objects: [link];" cursor="rayOrigin: mouse" camera-position>
       <a-assets>
         <img id="thumbHome" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/home.png">
         <img id="thumbCity" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/city.png">
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aframe",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A web framework for building virtual reality experiences.",
   "homepage": "https://aframe.io/",
   "main": "dist/aframe-master.js",
diff --git a/src/components/cursor.js b/src/components/cursor.js
@@ -1,3 +1,4 @@
+/* global THREE */
 var registerComponent = require('../core/component').registerComponent;
 var utils = require('../utils/');
 
@@ -37,7 +38,8 @@ module.exports.Component = registerComponent('cursor', {
     downEvents: {default: []},
     fuse: {default: utils.device.isMobile()},
     fuseTimeout: {default: 1500, min: 0},
-    upEvents: {default: []}
+    upEvents: {default: []},
+    rayOrigin: {default: 'entity', oneOf: ['mouse', 'entity']}
   },
 
   init: function () {
@@ -51,6 +53,12 @@ module.exports.Component = registerComponent('cursor', {
     this.onCursorUp = bind(this.onCursorUp, this);
     this.onIntersection = bind(this.onIntersection, this);
     this.onIntersectionCleared = bind(this.onIntersectionCleared, this);
+    this.onMouseMove = bind(this.onMouseMove, this);
+  },
+
+  update: function (oldData) {
+    if (this.data.rayOrigin === oldData.rayOrigin) { return; }
+    this.updateMouseEventListeners();
   },
 
   play: function () {
@@ -118,8 +126,38 @@ module.exports.Component = registerComponent('cursor', {
     });
     el.removeEventListener('raycaster-intersection', this.onIntersection);
     el.removeEventListener('raycaster-intersection-cleared', this.onIntersectionCleared);
+    window.removeEventListener('mousemove', this.onMouseMove);
+  },
+
+  updateMouseEventListeners: function () {
+    var el = this.el;
+    window.removeEventListener('mousemove', this.onMouseMove);
+    el.setAttribute('raycaster', 'useWorldCoordinates', false);
+    if (this.data.rayOrigin !== 'mouse') { return; }
+    window.addEventListener('mousemove', this.onMouseMove, false);
+    el.setAttribute('raycaster', 'useWorldCoordinates', true);
   },
 
+  onMouseMove: (function () {
+    var mouse = new THREE.Vector2();
+    var origin = new THREE.Vector3();
+    var direction = new THREE.Vector3();
+    var rayCasterConfig = {
+      origin: origin,
+      direction: direction
+    };
+    return function (evt) {
+      var camera = this.el.sceneEl.camera;
+      camera.parent.updateMatrixWorld();
+      camera.updateMatrixWorld();
+      mouse.x = (evt.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = -(evt.clientY / window.innerHeight) * 2 + 1;
+      origin.setFromMatrixPosition(camera.matrixWorld);
+      direction.set(mouse.x, mouse.y, 0.5).unproject(camera).sub(origin).normalize();
+      this.el.setAttribute('raycaster', rayCasterConfig);
+    };
+  })(),
+
   /**
    * Trigger mousedown and keep track of the mousedowned entity.
    */
diff --git a/src/components/raycaster.js b/src/components/raycaster.js
@@ -27,7 +27,8 @@ module.exports.Component = registerComponent('raycaster', {
     objects: {default: ''},
     origin: {type: 'vec3'},
     recursive: {default: true},
-    showLine: {default: false}
+    showLine: {default: false},
+    useWorldCoordinates: {default: false}
   },
 
   init: function () {
@@ -226,6 +227,11 @@ module.exports.Component = registerComponent('raycaster', {
       var el = this.el;
       var data = this.data;
 
+      if (data.useWorldCoordinates) {
+        this.raycaster.set(data.origin, data.direction);
+        return;
+      }
+
       // Grab the position and rotation.
       el.object3D.updateMatrixWorld();
       el.object3D.matrixWorld.decompose(originVec3, quaternion, dummyVec);
diff --git a/tests/components/cursor.test.js b/tests/components/cursor.test.js
@@ -1,4 +1,4 @@
-/* global assert, process, setup, suite, test */
+/* global assert, process, setup, suite, test, CustomEvent */
 var entityFactory = require('../helpers').entityFactory;
 var once = require('../helpers').once;
 
@@ -74,6 +74,16 @@ suite('cursor', function () {
         done();
       });
     });
+
+    suite('update', function () {
+      test('update mousemove event listeners when rayOrigin is the mouse', function () {
+        var updateSpy = this.sinon.spy(el.components.cursor, 'update');
+        var updateMouseEventListenersSpy = this.sinon.spy(el.components.cursor, 'updateMouseEventListeners');
+        el.setAttribute('cursor', 'rayOrigin', 'mouse');
+        assert.ok(updateSpy.called);
+        assert.ok(updateMouseEventListenersSpy.called);
+      });
+    });
   });
 
   suite('onCursorDown', function () {
@@ -346,6 +356,81 @@ suite('cursor', function () {
       assert.notOk(el.is('cursor-hovering'));
     });
   });
+
+  suite('onIntersectionCleared', function () {
+    test('does not do anything if not intersecting', function () {
+      el.emit('raycaster-intersection-cleared', {el: intersectedEl});
+    });
+
+    test('does not do anything if only the cursor is intersecting', function () {
+      component.intersection = intersection;
+      component.intersectedEl = intersectedEl;
+      el.emit('raycaster-intersection-cleared', {els: [el]});
+      assert.ok(component.intersection);
+      assert.ok(component.intersectedEl);
+    });
+
+    test('unsets intersectedEl', function () {
+      component.intersection = intersection;
+      component.intersectedEl = intersectedEl;
+      el.emit('raycaster-intersection-cleared', {el: intersectedEl});
+      assert.notOk(component.intersection);
+      assert.notOk(component.intersectedEl);
+    });
+
+    test('removes cursor-hovered state on intersectedEl', function () {
+      component.intersection = intersection;
+      component.intersectedEl = intersectedEl;
+      intersectedEl.addState('cursor-hovered');
+      el.emit('raycaster-intersection-cleared', {el: intersectedEl});
+      assert.notOk(intersectedEl.is('cursor-hovered'));
+    });
+
+    test('emits mouseleave event on el', function (done) {
+      component.intersection = intersection;
+      component.intersectedEl = intersectedEl;
+      once(el, 'mouseleave', function (evt) {
+        assert.equal(evt.detail.intersectedEl, intersectedEl);
+        done();
+      });
+      el.emit('raycaster-intersection-cleared', {el: intersectedEl});
+    });
+
+    test('emits mouseleave event on intersectedEl', function (done) {
+      component.intersection = intersection;
+      component.intersectedEl = intersectedEl;
+      once(intersectedEl, 'mouseleave', function (evt) {
+        assert.equal(evt.detail.cursorEl, el);
+        done();
+      });
+      el.emit('raycaster-intersection-cleared', {el: intersectedEl});
+    });
+
+    test('removes cursor-hovering and cursor-fusing states on cursor', function () {
+      component.intersection = intersection;
+      component.intersectedEl = intersectedEl;
+      el.addState('cursor-fusing');
+      el.addState('cursor-hovering');
+      el.emit('raycaster-intersection-cleared', {el: intersectedEl});
+      assert.notOk(el.is('cursor-fusing'));
+      assert.notOk(el.is('cursor-hovering'));
+    });
+  });
+
+  suite('onMouseMove', function () {
+    test('update raycaster based on mouse coordinates', function (done) {
+      var event = new CustomEvent('mousemove');
+      event.clientX = 5;
+      event.clientY = 5;
+      el.setAttribute('cursor', 'rayOrigin', 'mouse');
+      window.dispatchEvent(event);
+      process.nextTick(function () {
+        var raycaster = el.getAttribute('raycaster');
+        assert.notEqual(raycaster.direction.x, 0);
+        done();
+      });
+    });
+  });
 });
 
 suite('cursor + raycaster', function () {
diff --git a/tests/components/raycaster.test.js b/tests/components/raycaster.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "aframe",`
`3`		`- "version": "0.6.0",`
	`3`	`+ "version": "0.6.1",`
`4`	`4`	`"description": "A web framework for building virtual reality experiences.",`
`5`	`5`	`"homepage": "https://aframe.io/",`
`6`	`6`	`"main": "dist/aframe-master.js",`