opaque laser

src/components/cursor-laser.js

@@ -3,11 +3,7 @@
  * Automatically set length on intersection.
  */
 AFRAME.registerComponent('cursor-laser', {
-  dependencies: ['sub-object'],
-
-  schema: {
-    hand: {type: 'string'}
-  },
+  dependencies: ['geometry'],
 
   init: function () {
     const el = this.el;
@@ -18,21 +14,16 @@ AFRAME.registerComponent('cursor-laser', {
     this.originalSize = undefined;
 
     // Calculate size to position beam at tip of controller.
-    el.addEventListener('subobjectloaded', () => {
-      box.setFromObject(el.getObject3D('mesh'));
-      box.getSize(size);
-      el.object3D.position.z -= size.z;
-      this.originalSize = size.z;
-      this.currentLength = size.z;
-    });
+    box.setFromObject(el.getObject3D('mesh'));
+    box.getSize(size);
+    el.object3D.position.z = -0.3;
+    this.originalSize = size.y;
+    this.currentLength = size.y;
   },
 
   tick: function () {
     const el = this.el;
 
-    // Not yet ready.
-    if (this.currentLength === undefined) { return; }
-
     const cursor = el.parentNode.components.cursor;
     if (!cursor) { return; }
 
@@ -41,19 +32,17 @@ AFRAME.registerComponent('cursor-laser', {
 
     if (!intersectedEl) {
       // Retract the beam if not intersecting.
-      el.object3D.position.z = this.originalSize * -0.35;
-      el.object3D.scale.x = 0.25;
-      el.object3D.scale.z = this.originalSize * 0.35;
-      this.currentLength = this.originalSize * 0.35;
+      el.object3D.position.z = -25;
+      el.object3D.scale.x = 0.75;
+      el.getObject3D('mesh').scale.y = 50;
+      this.currentLength = 1;
       return;
     }
 
     // Set appropriate length of beam on intersection.
     const intersection = el.parentNode.components.raycaster.intersections[0];
-    const ratio = intersection.distance / this.currentLength;
     el.object3D.scale.x = 1;
-    el.object3D.position.z *= ratio;
-    el.object3D.scale.z *= ratio;
-    this.currentLength = el.object3D.scale.z;
+    el.object3D.position.z = (-intersection.distance / 2);
+    el.getObject3D('mesh').scale.y = this.currentLength = intersection.distance;
   }
 });

src/index.html

@@ -115,7 +115,6 @@
       <a-entity id="beatObjTemplate" obj-model="obj: #beatObj" visible="false"></a-entity>
       <a-entity id="dotObjTemplate" obj-model="obj: #dotObj" visible="false"></a-entity>
       <a-entity id="mineObjTemplate" obj-model="obj: #mineObj" visible="false"></a-entity>
-
       <a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>
 
       <a-entity id="container">
@@ -143,7 +142,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"
@@ -180,8 +179,9 @@
               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>
+              geometry="primitive: cylinder; height: 1; radius: 0.005"
+              material="color: {{ beamColor }}; shader: flat"
+              rotation="-90 0 0"></a-entity>
 
             <a-entity class="saberContainer" rotation="90 0 0">
               <a-entity
@@ -238,7 +238,7 @@
 
       {% 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 %}