define saber declaratively

src/components/cursor-mesh.js

@@ -35,6 +35,8 @@ AFRAME.registerComponent('cursor-mesh', {
 
     // Update cursor mesh.
     intersection = cursorEl.components.raycaster.getIntersection(intersectedEl);
+    if (!intersection) { return; }
+
     el.object3D.position.copy(intersection.point);
 
     if (scenePivotEl) {

src/components/saber-controls.js

@@ -1,85 +1,40 @@
 AFRAME.registerComponent('saber-controls', {
   schema: {
-    hand: {default: 'right', oneOf: ['left', 'right']},
+    enabled: {default: false},
-    bladeEnabled: {default: true}
+    hand: {default: 'right', oneOf: ['left', 'right']}
-  },
-
-  colors: {
-    right: '#78aaff', // Blue
-    left: '#ffa8a8' // Red
   },
 
   init: function () {
     var el = this.el;
     var data = this.data;
+
+    this.controllerType = '';
+
     el.addEventListener('controllerconnected', this.initSaber.bind(this));
 
     const hand = {hand: data.hand, model: false};
     el.setAttribute('oculus-touch-controls', hand);
     el.setAttribute('vive-controls', hand);
     el.setAttribute('windows-motion-controls', hand);
+
+    this.bladeEl = this.el.querySelector('.blade');
   },
 
-  update: function () {
+  update: function (oldData) {
-    if (!this.bladeEl) { return; }
+    if (!oldData.bladeEnabled  && this.data.bladeEnabled) {
-    this.bladeEl.object3D.visible = this.data.bladeEnabled;
-    if (this.data.bladeEnabled) {
-      this.bladeElPivot.object3D.scale.set(0.0001, 0.001, 0.0001);
       this.bladeEl.emit('drawblade');
     }
   },
 
   tick: function () {
-    if (!this.bladeEl || !this.bladeEl.getObject3D('mesh')) { return; }
+    if (!this.data.enabled) { return; }
     this.boundingBox.setFromObject(this.bladeEl.getObject3D('mesh'));
   },
 
   initSaber: function (evt) {
-    var el = this.el;
-    var saberHandleEl = document.createElement('a-entity');
-    var bladeEl = this.bladeEl = document.createElement('a-entity');
-    var bladeElPivot = this.bladeElPivot = document.createElement('a-entity');
-    var saberPivotEl = document.createElement('a-entity');
-    var highlightTop = document.createElement('a-entity');
-    var highlightBottom = document.createElement('a-entity');
-    var controllerConfig = this.config[evt.detail.name];
-
     this.boundingBox = new THREE.Box3();
-
-    bladeEl.setAttribute('material', {shader: 'flat', color: this.colors[this.data.hand]});
-    bladeEl.setAttribute('geometry', {primitive: 'box', height: 0.9, depth: 0.020, width: 0.020});
-    bladeEl.setAttribute('position', '0 -0.55 0');
-    bladeEl.setAttribute('play-sound', {event: 'drawblade', sound: "#saberDraw"});
-    bladeEl.object3D.visible = this.data.bladeEnabled;
-
-    // For blade saber draw animation.
-    bladeElPivot.appendChild(bladeEl);
-    bladeElPivot.setAttribute('animation', 'property: scale; from: 0 0 0; to: 1.0 1.0 1.0; dur: 750; easing: linear; startEvents: drawblade');
-
-    saberHandleEl.setAttribute('material', {shader: 'flat', color: '#151515'});
-    saberHandleEl.setAttribute('geometry', {primitive: 'box', height: 0.2, depth: 0.025, width: 0.025});
-    saberHandleEl.setAttribute('position', '0 0 0');
-
-    highlightTop.setAttribute('material', {shader: 'flat', color: this.colors[this.data.hand]});
-    highlightTop.setAttribute('geometry', {primitive: 'box', height: 0.18, depth: 0.005, width: 0.005});
-    highlightTop.setAttribute('position', '0 0 0.0125');
-
-    highlightBottom.setAttribute('material', {shader: 'flat', color: this.colors[this.data.hand]});
-    highlightBottom.setAttribute('geometry', {primitive: 'box', height: 0.18, depth: 0.005, width: 0.005});
-    highlightBottom.setAttribute('position', '0 0 -0.0125');
-
-    saberHandleEl.appendChild(highlightTop);
-    saberHandleEl.appendChild(highlightBottom)
-
-    saberPivotEl.setAttribute('rotation', '90 0 0');
-    saberPivotEl.appendChild(saberHandleEl);
-    saberPivotEl.appendChild(bladeElPivot);
-    el.appendChild(saberPivotEl);
-
-    this.controllerConnected = true;
     this.controllerType = evt.detail.name;
-
+    this.el.setAttribute('cursor', this.config[this.controllerType].cursor || {});
-    el.setAttribute('cursor', controllerConfig.cursor || {});
   },
 
   config: {

src/index.html

@@ -60,28 +60,58 @@
       <a-entity id="cameraRig">
         <a-entity id="camera" position="0 1.6 0.5" camera look-controls wasd-controls></a-entity>
 
-        {% macro saber (hand, otherHand, color) %}
+        {% macro saber (hand, otherHand, bladeColor, beamColor) %}
           <a-entity id="{{ hand }}Hand"
             mixin="raycaster"
             bind__hand-swapper="enabled: {{ otherHand }}RaycasterActive"
             bind__pauser="enabled: !menu.active"
             bind__raycaster="enabled: {{ hand }}RaycasterActive; showLine: {{ hand }}RaycasterActive"
-            bind__saber-controls="bladeEnabled: !menu.active"
             cursor
-            saber-controls="hand: {{ hand }}"
             haptics="events: mouseenter; dur: 35; force: 0.075"
-            line="color: {{ color }}">
+            line="color: {{ color }}"
+            saber-controls="hand: {{ hand }}">
+
+            <a-entity class="saberContainer" rotation="90 0 0">
+              <a-entity
+                class="bladeContainer"
+                bind__visible="!menu.active"
+                animation="property: scale; from: 0 0 0; to: 1 1 1; dur: 750; easing: linear; startEvents: drawblade"
+                scale="0.001 0.001 0.001">
+                <a-entity
+                  class="blade"
+                  geometry="primitive: box; height: 0.9; depth: 0.02; width: 0.02"
+                  material="shader: flat; color: {{ bladeColor }}"
+                  play-sound="event: drawblade; sound: #saberDraw"
+                  position="0 -0.55 0"></a-entity>
+              </a-entity>
+              <a-entity
+                class="saberHandle"
+                geometry="primitive: box; height: 0.2; depth: 0.025; width: 0.025"
+                material="shader: flat; color: #151515">
+                <a-entity
+                  class="highlightTop"
+                  geometry="primitive: box; height: 0.18; depth: 0.005; width: 0.005"
+                  material="shader: flat; color: {{ bladeColor }}"
+                  position="0 0 0.0125"></a-entity>
+                <a-entity
+                  class="highlightBottom"
+                  geometry="primitive: box; height: 0.18; depth: 0.005; width: 0.005"
+                  material="shader: flat; color: {{ bladeColor }}"
+                  position="0 0 -0.0125"></a-entity>
+              </a-entity>
+            </a-entity>
+
             <a-entity class="fakeGlow" rotation="90 0 0" position="0 0.01 0" bind__visible="menu.active">
-              <a-entity geometry="primitive: cylinder; height: 0.1831; radius: 0.0055" material="color: {{ color }}; shader: flat; opacity: 0.11"></a-entity>
+              <a-entity geometry="primitive: cylinder; height: 0.1831; radius: 0.0055" material="color: {{ beamColor }}; shader: flat; opacity: 0.11"></a-entity>
-              <a-entity geometry="primitive: cylinder; height: 0.1832; radius: 0.0065" material="color: {{ color }}; shader: flat; opacity: 0.09"></a-entity>
+              <a-entity geometry="primitive: cylinder; height: 0.1832; radius: 0.0065" material="color: {{ beamColor }}; shader: flat; opacity: 0.09"></a-entity>
-              <a-entity geometry="primitive: cylinder; height: 0.1833; radius: 0.0075" material="color: {{ color }}; shader: flat; opacity: 0.06"></a-entity>
+              <a-entity geometry="primitive: cylinder; height: 0.1833; radius: 0.0075" material="color: {{ beamColor }}; shader: flat; opacity: 0.06"></a-entity>
-              <a-entity geometry="primitive: cylinder; height: 0.1834; radius: 0.0085" material="color: {{ color }}; shader: flat; opacity: 0.04"></a-entity>
+              <a-entity geometry="primitive: cylinder; height: 0.1834; radius: 0.0085" material="color: {{ beamColor }}; shader: flat; opacity: 0.04"></a-entity>
             </a-entity>
           </a-entity>
         {% endmacro %}
 
-        {{ saber('left', 'right', 'pink') }}
+        {{ saber('left', 'right', '#FFA8A8', 'pink') }}
-        {{ saber('right', 'left', 'cyan') }}
+        {{ saber('right', 'left', '#78AAFF', 'cyan') }}
       </a-entity>
 
       <a-mixin