From 109a6743e2924e262f78994ccce4b276c549c227 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Tue, 16 Oct 2018 01:31:59 -0700
Subject: [PATCH] angle raycaster down

---
 src/components/{laser.js => cursor-laser.js} |  6 ++--
 src/components/debug-controller.js           |  1 +
 src/components/saber-controls.js             | 38 +++++++++++++++++---
 src/index.html                               | 18 ++++++----
 4 files changed, 49 insertions(+), 14 deletions(-)
 rename src/components/{laser.js => cursor-laser.js} (86%)

diff --git a/src/components/laser.js b/src/components/cursor-laser.js
similarity index 86%
rename from src/components/laser.js
rename to src/components/cursor-laser.js
index 03d24d5..f05978f 100644
--- a/src/components/laser.js
+++ b/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;
diff --git a/src/components/debug-controller.js b/src/components/debug-controller.js
index a8287c1..8e08a5a 100644
--- a/src/components/debug-controller.js
+++ b/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 () {
diff --git a/src/components/saber-controls.js b/src/components/saber-controls.js
index ee9602a..22187ac 100644
--- a/src/components/saber-controls.js
+++ b/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}
       }
     }
   }
diff --git a/src/index.html b/src/index.html
index 211a1f8..86f8177 100644
--- a/src/index.html
+++ b/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>