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}
       }
     }
   }