angle raycaster down

src/components/cursor-laser.js

@@ -16,6 +16,7 @@ AFRAME.registerComponent('cursor-laser', {
 
     this.currentLength = undefined;
     this.originalSize = undefined;
+    this.raycasterEl = el.closest('[mixin~="raycaster"], [raycaster]');
 
     // Calculate size to position beam at tip of controller.
     el.addEventListener('subobjectloaded', () => {
@@ -29,11 +30,12 @@ AFRAME.registerComponent('cursor-laser', {
 
   tick: function () {
     const el = this.el;
+    const raycasterEl = this.raycasterEl;
 
     // Not yet ready.
     if (this.currentLength === undefined) { return; }
 
-    const cursor = el.parentNode.components.cursor;
+    const cursor = raycasterEl.components.cursor;
     if (!cursor) { return; }
 
     // Toggle beam.
@@ -49,7 +51,7 @@ AFRAME.registerComponent('cursor-laser', {
     }
 
     // Set appropriate length of beam on intersection.
-    const intersection = el.parentNode.components.raycaster.intersections[0];
+    const intersection = raycasterEl.components.raycaster.intersections[0];
     const ratio = intersection.distance / this.currentLength;
     el.object3D.scale.x = 1;
     el.object3D.position.z *= ratio;

src/components/debug-controller.js

@@ -154,6 +154,7 @@ AFRAME.registerComponent('debug-controller', {
     secondaryHand.object3D.position.set(-0.2, 1.5, -0.5);
     primaryHand.object3D.position.set(0.2, 1.5, -0.5);
     secondaryHand.setAttribute('rotation', {x: 35, y: 0, z: 0});
+    // primaryHand.object3D.rotation.x = Math.PI / 2;
   },
 
   onMouseMove: (function () {

src/components/saber-controls.js

@@ -44,6 +44,27 @@ AFRAME.registerComponent('saber-controls', {
     this.detectStroke(delta);
   },
 
+  initSaber: function (evt) {
+    this.controllerType = evt.detail.name;
+    const config = this.config[this.controllerType] || {};
+    this.configureRaycaster(config);
+  },
+
+  /**
+   * Rotate laser to match raycaster origin and direction, which are angled down for comfort.
+   */
+  configureRaycaster: function (config) {
+    this.el.setAttribute('cursor', config.cursor);
+    this.el.setAttribute('raycaster', config.raycaster);
+
+    const laser = this.el.querySelector('.laser');
+    laser.object3D.position.copy(config.raycaster.origin);
+    laser.object3D.rotation.x = -Math.atan(
+      Math.abs(config.raycaster.direction.y) /
+      Math.abs(config.raycaster.direction.z)
+    )
+  },
+
   detectStroke: function (delta) {
     var bladeObject
     var distance;
@@ -73,11 +94,6 @@ AFRAME.registerComponent('saber-controls', {
     this.bladeTipPreviousPosition.copy(this.bladeTipPosition);
   },
 
-  initSaber: function (evt) {
-    this.controllerType = evt.detail.name;
-    this.el.setAttribute('cursor', this.config[this.controllerType].cursor || {});
-  },
-
   config: {
     'oculus-touch-controls': {
       cursor: {
@@ -97,6 +113,10 @@ AFRAME.registerComponent('saber-controls', {
           'xbuttonup',
           'ybuttonup'
         ]
+      },
+      raycaster: {
+        direction: new THREE.Vector3(0, -2, -1).normalize(),
+        origin: {x: 0, y: 0, z: -0.1}
       }
     },
 
@@ -104,6 +124,10 @@ AFRAME.registerComponent('saber-controls', {
       cursor: {
         downEvents: ['trackpaddown', 'triggerdown', 'gripdown'],
         upEvents: ['trackpadup', 'triggerup', 'gripup']
+      },
+      raycaster: {
+        direction: new THREE.Vector3(0, -0.6, -1).normalize(),
+        origin: {x: 0, y: 0, z: -0.1}
       }
     },
 
@@ -111,6 +135,10 @@ AFRAME.registerComponent('saber-controls', {
       cursor: {
         downEvents: ['trackpaddown', 'triggerdown', 'gripdown'],
         upEvents: ['trackpadup', 'triggerup', 'gripup']
+      },
+      raycaster: {
+        direction: new THREE.Vector3(0, -2, -1).normalize(),
+        origin: {x: 0, y: 0, z: -0.1}
       }
     }
   }

src/index.html

@@ -143,7 +143,7 @@
       <!-- Player. -->
       <a-mixin
         id="raycaster"
-        raycaster="objects: [raycastable]; far: 3"
+        raycaster="objects: [raycastable]; far: 3; showLine: false"
         line="opacity: 0.75"></a-mixin>
       <a-mixin
         id="cursorMesh"
@@ -177,10 +177,14 @@
             trail="color: {{ bladeColor }}; hand: {{ hand }}">
             <a-entity
               id="{{ hand }}Laser"
-              bind__visible="menuActive && activeHand === '{{ hand }}'"
-              cursor-laser="hand: {{ hand }}"
-              sub-object="from: #cursorLaser; name: beam"
-              material="color: {{ beamColor }}; shader: flat; transparent: true; opacity: 0.04"></a-entity>
+              class="laser"
+              bind__visible="menuActive && activeHand === '{{ hand }}'">
+              <a-entity
+                class="laserMesh"
+                cursor-laser="hand: {{ hand }}"
+                sub-object="from: #cursorLaser; name: beam"
+                material="color: {{ beamColor }}; shader: flat; transparent: true; opacity: 0.04"></a-entity>
+            </a-entity>
 
             <a-entity class="saberContainer" rotation="90 0 0">
               <a-entity
@@ -237,12 +241,12 @@
 
       {% if not IS_PRODUCTION %}
         <a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
-                  bind__raycaster="enabled: !inVR" raycaster="showLine: false"></a-entity>
+                  bind__raycaster="enabled: !inVR"></a-entity>
         <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"
                   bind__cursor-mesh="active: menuActive"></a-entity>
       {% endif %}
-
     </a-scene>
+
     <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
   </body>
 </html>