break mines apart when hit (fixes #117)

src/assets.html

@@ -7,9 +7,11 @@
 <a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>
 <a-asset-item id="laserObj" src="assets/models/laser/laser.obj"></a-asset-item>
 <a-asset-item id="laserNeonObj" src="assets/models/laserneon.obj"></a-asset-item>
-<a-asset-item id="logoSparks" src="assets/models/logosparks.json"></a-asset-item>
+<a-asset-item id="logoSparksJSON" src="assets/models/logosparks.json"></a-asset-item>
 <a-asset-item id="mineObj" src="assets/models/mine.obj"></a-asset-item>
-<a-asset-item id="sabercutParticles" src="assets/models/sabercut.json"></a-asset-item>
+<a-asset-item id="mineBrokenObj" src="assets/models/minebroken.obj"></a-asset-item>
+<a-asset-item id="mineParticlesJSON" src="assets/models/mineparticles.json"></a-asset-item>
+<a-asset-item id="saberParticlesJSON" src="assets/models/sabercut.json"></a-asset-item>
 <a-asset-item id="stageNeonObj" src="assets/models/neons.obj"></a-asset-item>
 <a-asset-item id="tunnelObj" src="assets/models/tunnel.obj"></a-asset-item>
 <a-asset-item id="tunnelNeonObj" src="assets/models/tunnelneon.obj"></a-asset-item>

src/components/beat-loader.js

@@ -201,6 +201,9 @@ AFRAME.registerComponent('beat-loader', {
     return function (noteInfo) {
       var beatEl;
       var color;
+
+      // if (Math.random() < 0.8) noteInfo._type = 3; // just to DEBUG MINES!
+
       var type = noteInfo._cutDirection === 8 ? 'dot' : 'arrow';
 
       color = noteInfo._type === 0 ? 'red' : 'blue';

src/components/beat.js

@@ -70,12 +70,18 @@ AFRAME.registerComponent('beat', {
     this.missElLeft = document.getElementById('missLeft');
     this.missElRight = document.getElementById('missRight');
     this.particles = document.getElementById('saberParticles');
+    this.mineParticles = document.getElementById('mineParticles');
 
     this.saberColors = {right: 'blue', left: 'red'};
 
     this.initBlock();
     this.initColliders();
+    if (this.data.type === 'mine') {
+      this.initMineFragments();
+    }
+    else {
       this.initFragments();
+    };
   },
 
   update: function () {
@@ -91,8 +97,10 @@ AFRAME.registerComponent('beat', {
 
   pause: function () {
     this.el.object3D.visible = false;
+    if (this.data.type !== 'mine') {
       this.partLeftEl.object3D.visible = false;
       this.partRightEl.object3D.visible = false;
+    }
   },
 
   play: function () {
@@ -241,11 +249,46 @@ AFRAME.registerComponent('beat', {
     this.initCuttingClippingPlanes();
   },
 
+  initMineFragments: function () {
+    var fragment;
+    var fragments = this.el.sceneEl.systems['mine-fragments-loader'].fragments.children;
+    var material = this.el.sceneEl.components['stage-colors'].mineMaterial;
+
+    this.randVec = new THREE.Vector3(
+      Math.random() * Math.PI,
+      Math.random() * Math.PI,
+      Math.random() * Math.PI);
+
+    this.mineFragments = [];
+    this.mineBroken = document.createElement('a-entity');
+    this.el.appendChild(this.mineBroken);
+
+    for (var i = 0; i < fragments.length; i++) {
+      fragment = new THREE.Mesh(fragments[i].geometry, material);
+      fragment.speed = new THREE.Vector3();
+      fragment.speed.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5);
+      this.mineFragments.push(fragment);
+      this.mineBroken.object3D.add(fragment);
+    }
+  },
+
   updateFragments: function () {
     var cutLeftEl = this.cutLeftEl;
     var cutRightEl = this.cutRightEl;
     var partLeftEl = this.partLeftEl;
     var partRightEl = this.partRightEl;
+    var fragment;
+
+    if (this.data.type === 'mine') {
+      for (var i = 0; i < this.mineFragments.length; i++) {
+        fragment = this.mineFragments[i];
+        fragment.visible = false;
+        fragment.position.set(0, 0, 0);
+        fragment.scale.set(1, 1, 1);
+        fragment.speed.set(Math.random() * 5 - 2.5, Math.random() * 5 - 2.5, Math.random() * 5 - 2.5);
+      }
+      return;
+    }
 
     partLeftEl.setAttribute('material', {
       metalness: 0.8,
@@ -415,6 +458,24 @@ AFRAME.registerComponent('beat', {
     };
   })(),
 
+  destroyMine: function () {
+    var fragment;
+
+    for (var i = 0; i < this.mineFragments.length; i++) {
+      this.mineFragments[i].visible = true;
+    }
+
+    this.blockEl.object3D.visible = false;
+    this.destroyed = true;
+    this.gravityVelocity = 0.1;
+    this.returnToPoolTimer = 800;
+
+    this.mineParticles.emit('explode', {
+      position: this.el.object3D.position,
+      rotation: this.randVec
+    });
+  },
+
   initCuttingClippingPlanes: function () {
     this.leftCutPlanePointsWorld = [
       new THREE.Vector3(),
@@ -508,18 +569,25 @@ AFRAME.registerComponent('beat', {
         }
         this.el.parentNode.components['beat-hit-sound'].playSound(
           this.el, this.data.cutDirection);
+        if (this.data.type === 'mine') {
+          this.destroyMine();
+        } else {
           this.destroyBeat(saberEls[i]);
+        }
         break;
       }
 
       if (saberBoundingBox.intersectsBox(beatBoundingBox)) {
         this.el.parentNode.components['beat-hit-sound'].playSound(this.el);
-        this.destroyBeat(saberEls[i]);
+
         if (this.data.type === 'mine') {
           this.el.emit('minehit', null, true);
+          this.destroyMine();
           break;
         }
 
+        this.destroyBeat(saberEls[i]);
+
         if (this.data.type === 'dot' && saberEls[i].components['saber-controls'].swinging &&
             this.data.color === saberColors[hand]) {
           this.el.emit('beathit', null, true);
@@ -541,12 +609,26 @@ AFRAME.registerComponent('beat', {
     var rightCutNormal = new THREE.Vector3();
     var rightRotation = 0;
     var rotationStep = 2 * Math.PI / 150;
+    var fragment;
 
     return function (timeDelta) {
       // Update gravity velocity.
       this.gravityVelocity = getGravityVelocity(this.gravityVelocity, timeDelta);
       this.el.object3D.position.y += this.gravityVelocity * (timeDelta / 1000);
 
+      if (this.data.type == 'mine') {
+        for (var i = 0; i < this.mineFragments.length; i++) {
+          fragment = this.mineFragments[i];
+          if (!fragment.visible) { continue; }
+          fragment.position.addScaledVector(fragment.speed, timeDelta / 1000);
+          fragment.scale.multiplyScalar(0.97)
+          if (fragment.scale.y < 0.1){
+            fragment.visible = false;
+          }
+        }
+        return;
+      }
+
       rightCutNormal.copy(this.rightCutPlane.normal)
                     .multiplyScalar((this.data.speed / 2) * (timeDelta / 500));
       rightCutNormal.y = 0;  // Y handled by gravity.

src/components/mine-fragments-loader.js

@@ -0,0 +1,10 @@
+AFRAME.registerSystem('mine-fragments-loader', {
+  init: function () {
+    this.fragments = null;
+    var objData = document.getElementById('mineBrokenObj');
+    objData.addEventListener('loaded', (ev) => {
+      var objLoader = new THREE.OBJLoader();
+      this.fragments = objLoader.parse(ev.target.data);
+    })
+  }
+});

src/index.html

@@ -77,7 +77,10 @@
 
       <a-entity
         id="saberParticles"
-        particleplayer="src: #sabercutParticles; pscale: 0.5; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 4 1 1; finalScale: 0.2 0.2 1"></a-entity>
+        particleplayer="src: #saberParticlesJSON; pscale: 0.5; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 4 1 1; finalScale: 0.2 0.2 1"></a-entity>
+      <a-entity
+        id="mineParticles"
+        particleplayer="src: #mineParticlesJSON; pscale: 0.5; scale: 1.4; loop: false; on: explode; img: #sparkImg; count: 100%; animateScale: true; initialScale: 3 1 1; finalScale: 0.2 0.2 1"></a-entity>
 
       <!-- Player. -->
       <a-mixin

src/templates/stage.html

@@ -122,7 +122,7 @@
     logo-light
     animation__rotate="property: object3D.rotation.y; from: 50; to: -50; dur: 300; easing: linear; startEvents: audioanalyserbeat"></a-entity>
 
-  <a-entity id="logosparks" bind__visible="menuActive" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.35; count: 10; dur: 1000; on: logoflicker; animateScale: true; initialScale: 1.5 1.5 1.5; finalScale: 0.3 0.3 0.3" position="-2.8 5.5 -7.2"></a-entity>
+  <a-entity id="logosparks" bind__visible="menuActive" particleplayer="src: #logoSparksJSON; scale: 1.4; pscale: 0.35; count: 10; dur: 1000; on: logoflicker; animateScale: true; initialScale: 1.5 1.5 1.5; finalScale: 0.3 0.3 0.3" position="-2.8 5.5 -7.2"></a-entity>
   <a-entity id="logo" bind__visible="menuActive" position="0 6 -7.5" rotation="90 0 0">
     <a-entity id="logoBack" obj-model="obj: #logobackObj" material="color: #001b29"></a-entity>
     <a-entity id="logoFront" obj-model="obj: #logofrontObj"  material="color: #e81e23"></a-entity>