From ac36d57fb60a2ca586ea608d7b45d67d95ad615e Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Fri, 21 Sep 2018 04:58:04 -0700 Subject: [PATCH] define saber declaratively --- src/components/cursor-mesh.js | 2 + src/components/saber-controls.js | 67 ++++++-------------------------- src/index.html | 50 +++++++++++++++++++----- 3 files changed, 53 insertions(+), 66 deletions(-) diff --git a/src/components/cursor-mesh.js b/src/components/cursor-mesh.js index ec4b2e6..c610385 100644 --- a/src/components/cursor-mesh.js +++ b/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) { diff --git a/src/components/saber-controls.js b/src/components/saber-controls.js index c2d71da..9a90237 100644 --- a/src/components/saber-controls.js +++ b/src/components/saber-controls.js @@ -1,85 +1,40 @@ AFRAME.registerComponent('saber-controls', { schema: { - hand: {default: 'right', oneOf: ['left', 'right']}, - bladeEnabled: {default: true} - }, - - colors: { - right: '#78aaff', // Blue - left: '#ffa8a8' // Red + enabled: {default: false}, + hand: {default: 'right', oneOf: ['left', 'right']} }, 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 () { - if (!this.bladeEl) { return; } - this.bladeEl.object3D.visible = this.data.bladeEnabled; - if (this.data.bladeEnabled) { - this.bladeElPivot.object3D.scale.set(0.0001, 0.001, 0.0001); + update: function (oldData) { + if (!oldData.bladeEnabled && this.data.bladeEnabled) { 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; - - el.setAttribute('cursor', controllerConfig.cursor || {}); + this.el.setAttribute('cursor', this.config[this.controllerType].cursor || {}); }, config: { diff --git a/src/index.html b/src/index.html index bb0c184..9f7d10b 100644 --- a/src/index.html +++ b/src/index.html @@ -60,28 +60,58 @@ - {% macro saber (hand, otherHand, color) %} + {% macro saber (hand, otherHand, bladeColor, beamColor) %} + line="color: {{ color }}" + saber-controls="hand: {{ hand }}"> + + + + + + + + + + + - - - - + + + + {% endmacro %} - {{ saber('left', 'right', 'pink') }} - {{ saber('right', 'left', 'cyan') }} + {{ saber('left', 'right', '#FFA8A8', 'pink') }} + {{ saber('right', 'left', '#78AAFF', 'cyan') }}