added particles on wall/floor collision

src/assets.html

@@ -8,6 +8,7 @@
 <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="logoSparksJSON" src="assets/models/logosparks.json"></a-asset-item>
+<a-asset-item id="sparksJSON" src="assets/models/sparks.json"></a-asset-item>
 <a-asset-item id="mineObj" src="assets/models/mine.obj"></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>
@@ -46,6 +47,7 @@
 <img id="noiseTexture" src="assets/img/noise.png">
 <img id="neonImg" src="assets/img/neon.png">
 <img id="sparkImg" src="assets/img/spark.png">
+<img id="spark2Img" src="assets/img/spark2.png">
 <img id="stepbackImg" src="assets/img/stepback.png">
 <img id="soundboxingImg" src="assets/img/soundboxing.png">
 <img id="genresImg" src="assets/img/genres.png">

src/components/beat.js

@@ -247,7 +247,7 @@ AFRAME.registerComponent('beat', {
   updateBlock: function () {
     const blockEl = this.blockEl;
     const signEl = this.signEl;
-
+    if (!blockEl) { return; }
     blockEl.setAttribute('material', {
       metalness: 0.6,
       roughness: 0.12,
@@ -348,7 +348,7 @@ AFRAME.registerComponent('beat', {
     var partLeftEl = this.partLeftEl;
     var partRightEl = this.partRightEl;
     var fragment;
-
+    if (!partLeftEl) { return; }
     if (this.data.type === 'mine') {
       this.resetMineFragments();
       return;

src/components/cursor-laser.js

@@ -51,6 +51,7 @@ AFRAME.registerComponent('cursor-laser', {
 
     // Set appropriate length of beam on intersection.
     const intersection = el.parentNode.components.raycaster.intersections[0];
+    if (!intersection) { return; }
     el.object3D.scale.x = 1;
     el.object3D.position.z = (-intersection.distance / 2);
     el.getObject3D('mesh').scale.y = this.currentLength = intersection.distance;

src/components/gpu-preloader.js

@@ -16,7 +16,7 @@ AFRAME.registerComponent('gpu-preloader', {
       this.preloadMissMap();
       this.preloadPlayButton();
       this.preloadSearchPrevPage();
-      this.preloadWallMap();
+      //this.preloadWallMap();
       this.preloadWrongMap();
       this.preloadGenres();
     }, 1000);
@@ -79,6 +79,7 @@ AFRAME.registerComponent('gpu-preloader', {
   preloadWallMap: function () {
     const wall = document.querySelector('a-entity[wall]');
     this.preloadTexture(wall.getObject3D('mesh').material.uniforms.tex.value);
+    this.preloadTexture(wall.getObject3D('mesh').material.uniforms.env.value);
   },
 
   preloadWrongMap: function () {

src/components/particleplayer.js

@@ -67,7 +67,9 @@ AFRAME.registerComponent('particleplayer', {
     this.sprite_rotation = false;
     this.systems = null;
     this.useRotation = false;
+    this.useAge = false;
     this.scaleAnim = new THREE.Vector3();
+    this.partScale = new THREE.Vector3(1.0, 1.0, 1.0);
   },
 
   update: function (oldData) {
@@ -86,6 +88,8 @@ AFRAME.registerComponent('particleplayer', {
       }
     }
 
+    this.partScale.set(1.0, 1.0, 1.0);
+
     this.loadParticlesJSON(data.src, data.scale);
 
     this.numFrames = this.framedata.length;
@@ -140,6 +144,7 @@ AFRAME.registerComponent('particleplayer', {
     const precision = jsonData.precision;
 
     this.useRotation = jsonData.rotation;
+    this.useAge = jsonData['age'] !== undefined ? jsonData.age : false;
 
     if (jsonData.sprite_rotation !== false) {
       this.sprite_rotation = {
@@ -173,7 +178,7 @@ AFRAME.registerComponent('particleplayer', {
           alive: alive
         });
 
-        if (jsonData.rotation) {
+        if (this.useRotation) {
           p.rotation = alive
             ? {
               x: rawP[3] / precision,
@@ -183,6 +188,10 @@ AFRAME.registerComponent('particleplayer', {
             : null;
         }
 
+        if (this.useAge) {
+          p.age = alive ? rawP[6] / precision : 0;
+        }
+
         if (alive && frameIndex === 0) {
           this.restPositions[particleIndex] = p.position
             ? {x: p.position.y, y: p.position.y, z: p.position.z}
@@ -215,8 +224,7 @@ AFRAME.registerComponent('particleplayer', {
           loopCount: 0,
           loopTotal: loop,
           mesh: null,
-          time: 0,
-          pscale: data.animateScale ? new THREE.Vector3() : null
+          time: 0
         };
 
         // Fill array of geometries to merge.
@@ -317,10 +325,6 @@ AFRAME.registerComponent('particleplayer', {
     particleSystem.mesh.position.copy(position);
     particleSystem.mesh.rotation.copy(rotation);
     particleSystem.time = 0;
-    if (this.data.animateScale) {
-      particleSystem.pscale.copy(this.data.initialScale);
-    }
-
     this.resetParticles(particleSystem);
   },
 
@@ -328,9 +332,6 @@ AFRAME.registerComponent('particleplayer', {
     particleSystem.loopCount++;
     particleSystem.frame = -1;
     particleSystem.time = 0;
-    if (this.data.animateScale) {
-      particleSystem.pscale.copy(data.initialScale);
-    }
     this.resetParticles(particleSystem);
   },
 
@@ -344,7 +345,7 @@ AFRAME.registerComponent('particleplayer', {
         this.originalVertexPositions,
         this.restPositions[particleIndex],
         this.useRotation && this.restRotations[particleIndex],
-        particleSystem.pscale
+        null
       );
     } else {
       // Hide.
@@ -419,6 +420,8 @@ AFRAME.registerComponent('particleplayer', {
       var frameTime; // time in current frame (for interpolation)
       var relTime; // current particle system relative time (0-1)
       var interpolate; // whether interpolate between frames or not
+      const scaleSystem = this.data.animateScale && !this.useAge;
+      const scaleParticle = this.data.animateScale && this.useAge;
 
       for (
         let particleSystemIndex = 0;
@@ -445,8 +448,8 @@ AFRAME.registerComponent('particleplayer', {
               : null;
         }
 
-        if (this.data.animateScale) {
-          particleSystem.pscale.lerp(this.data.finalScale, relTime);
+        if (scaleSystem) {
+          this.partScale.lerpVectors(this.data.initialScale, this.data.finalScale, relTime);
         }
 
         for (
@@ -458,6 +461,10 @@ AFRAME.registerComponent('particleplayer', {
             particleSystem.activeParticleIndices[activeParticleIndex];
           let rotation = useRotation && fdata[particleIndex].rotation;
 
+          if (scaleParticle) {
+            this.partScale.lerpVectors(this.data.initialScale, this.data.finalScale, fdata[particleIndex].age);
+          }
+
           // TODO: Add vertex position to original position to all vertices of plane...
           if (!fdata[particleIndex].alive) {
             // Hide plane off-screen when not alive.
@@ -484,7 +491,7 @@ AFRAME.registerComponent('particleplayer', {
               this.originalVertexPositions,
               helperPositionVec3,
               rotation,
-              particleSystem.pscale
+              this.partScale
             );
           } else {
             transformPlane(
@@ -493,7 +500,7 @@ AFRAME.registerComponent('particleplayer', {
               this.originalVertexPositions,
               fdata[particleIndex].position,
               rotation,
-              particleSystem.pscale
+              this.partScale
             );
           }
         }

src/components/saber-intersection.js

@@ -1,11 +1,16 @@
 AFRAME.registerComponent('saber-intersection', {
   dependencies: ['raycaster__game'],
+  schema: {
+    active: {default: true}
+  },
+
   init: function () {
     this.hiddenIntersection = {x: 999, y: 0, z: 0};
     this.saberHit = {
       rightHand: {active: false, position: null, raycaster: null},
       leftHand: {active: false, position: null, raycaster: null}
     };
+    this.particles = document.getElementById('sparkParticles');
     this.intersecting = false;
     this.saberEnterFunc = this.saberEnter.bind(this);
     this.saberLeaveFunc = this.saberLeave.bind(this);
@@ -15,6 +20,7 @@ AFRAME.registerComponent('saber-intersection', {
     this.el.removeAttribute('raycastable-game');
     this.el.removeEventListener('mouseenter', this.saberEnterFunc);
     this.el.removeEventListener('mouseleave', this.saberLeaveFunc);
+    this.intersecting = false;
   },
 
   play: function () {
@@ -27,7 +33,14 @@ AFRAME.registerComponent('saber-intersection', {
   },
 
   saberEnter: function (evt) {
-    this.saberHit[evt.detail.cursorEl.id].active = true;
+    if (!this.data.active) { return; }
+    const saber = this.saberHit[evt.detail.cursorEl.id];
+    saber.active = true;
+    int = saber.raycaster.getIntersection(this.el);
+      console.log(int);
+    if (int) {
+      this.particles.emit('start', {position: int.point, rotation: null});
+    }
     this.intersecting = true;
   },
 
@@ -39,7 +52,7 @@ AFRAME.registerComponent('saber-intersection', {
   },
 
   tick: function (time, delta) {
-    if (this.intersecting) {
+    if (this.data.active && this.intersecting) {
       var int;
       if (this.saberHit.rightHand.active) {
         int = this.saberHit.rightHand.raycaster.getIntersection(this.el);

src/index.html

@@ -87,6 +87,10 @@
       <a-entity
         id="mineParticles"
         particleplayer="src: #mineParticlesJSON; pscale: 0.5; scale: 1.4; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 3 1 1; finalScale: 0.2 0.2 1"></a-entity>
+      <a-entity
+        id="sparkParticles"
+        particleplayer="src: #sparksJSON; color: #fcc; pscale: 0.7; on: start; scale: 0.3; loop: false; img: #spark2Img; dur: 700; count: 50%; animateScale: true; initialScale: 3 0.5 1; finalScale: 0.1 0.5 1"></a-entity>
+
 
       <!-- Player. -->
       <a-mixin

src/templates/stage.html

@@ -129,7 +129,7 @@
     geometry="primitive: plane; width: 3; height: 3"
     material="shader: floorShader; src: #floorImg; normalMap: #floorNormalsImg; envMap: #floorEnvImg"
     rotation="-90 0 0"
-    saber-intersection
+    bind__saber-intersection="active: isPlaying"
     stepback></a-entity>
 
   <a-entity