Add saber controls

src/components/saber-controls.js

@@ -0,0 +1,45 @@
+AFRAME.registerComponent('saber-controls', {
+  schema: {
+    hand: {default: 'left', oneOf: ['left', 'right']}
+  },
+
+  init: function () {
+    var el = this.el;
+    var data = this.data;
+    el.setAttribute('oculus-touch-controls', {hand: data.hand, model: false});
+    el.setAttribute('vive-controls', {hand: data.hand, model: true});
+    el.setAttribute('windows-motion-controls', {hand: data.hand, model: false});
+    el.addEventListener('controllerconnected', this.initSaber.bind(this));
+  },
+  
+
+  initSaber: function () {
+    var el = this.el;
+    var saberHandleEl = document.createElement('a-entity');
+    var saberEl = this.saberEl = document.createElement('a-entity');
+    var saberPivotEl = document.createElement('a-entity');
+    var saberColor = this.data.hand === 'left' ? '#fdccd1' : '#b0ecfd';
+    //saberColor = '#ffffff';
+
+    this.boundingBox = new THREE.Box3();
+
+    saberEl.setAttribute('material', {shader: 'flat', color: saberColor});
+    saberEl.setAttribute('geometry', {primitive: 'box', height: 0.9, depth: 0.020, width: 0.020});
+    saberEl.setAttribute('position', '0 -0.55 0');
+
+    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');
+
+    saberPivotEl.setAttribute('rotation', '70 0 0');
+    saberPivotEl.appendChild(saberHandleEl);
+    saberPivotEl.appendChild(saberEl);
+    el.appendChild(saberPivotEl);
+  },
+
+  tick: function () {
+    if (!this.saberEl) { return; }
+    this.boundingBox.setFromObject(this.saberEl.getObject3D('mesh'));
+  }
+
+});

src/index.html

@@ -46,12 +46,12 @@
       <a-entity id="cameraRig">
         <a-entity id="camera" position="0 1.6 0.5" camera look-controls></a-entity>
         <a-entity id="leftHand"
-          controller="hand: left"
+          saber-controls="hand: left"
           proxy-event__pause="event: menudown; to: a-scene; as: pause"
           proxy-event__pauserifta="event: abuttondown; to: a-scene; as: pause"
           proxy-event__pauseriftb="event: bbuttondown; to: a-scene; as: pause"></a-entity>
         <a-entity id="rightHand"
-          controller="hand: right"
+          saber-controls="hand: right"
           proxy-event__pause="event: menudown; to: a-scene; as: pause"
           proxy-event__pauseriftx="event: xbuttondown; to: a-scene; as: pause"
           proxy-event__pauserifty="event: ybuttondown; to: a-scene; as: pause"></a-entity>