juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move beams behind smoke for transparency ordering

Browse Source
This commit is contained in:
Kevin Ngo
2018-12-04 01:25:43 -08:00
parent a9eb636528
commit ed4a233146
2 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/beams.js
View File

@@ -7,27 +7,9 @@ AFRAME.registerComponent('beams', {
},
init: function () {
this.beams = [];
this.currentRed = 0;
this.currentBlue = 0;
// Material.
const materialOptions = {
color: 0xaa3333,
map: new THREE.TextureLoader().load('assets/img/beam.png'),
transparent: false,
blending: THREE.AdditiveBlending
};
const redMaterial = new THREE.MeshBasicMaterial(materialOptions);
materialOptions.color = 0x4444cc;
const blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
this.texture = materialOptions.map;
// Beam pools.
const geometry = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
this.beams = [];
this.redBeams = this.createBeamPool(geometry, redMaterial);
this.blueBeams = this.createBeamPool(geometry, blueMaterial);
this.clearBeams = this.clearBeams.bind(this);
this.el.sceneEl.addEventListener('cleargame', this.clearBeams);
},
@@ -40,6 +22,25 @@ AFRAME.registerComponent('beams', {
}
},
play: function () {
// Material.
const materialOptions = {
color: 0xaa3333,
map: new THREE.TextureLoader().load('assets/img/beam.png'),
transparent: true,
blending: THREE.AdditiveBlending
};
const redMaterial = new THREE.MeshBasicMaterial(materialOptions);
materialOptions.color = 0x4444cc;
const blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
this.texture = materialOptions.map;
// Beam pools.
const geometry = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
this.redBeams = this.createBeamPool(geometry, redMaterial);
this.blueBeams = this.createBeamPool(geometry, blueMaterial);
},
/**
* Use tick for manual ANIME animations, else it will create RAF.
*/

4
src/templates/stage.html
View File

@@ -95,6 +95,8 @@
<a-entity id="rightStageLaser2" mixin="stageLaser neonAnimation" position="14 -1.5 -36"></a-entity>
</a-entity>
<a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
<a-mixin
id="smoke"
mixin="gameoverAnimation"
@@ -106,8 +108,6 @@
<a-entity id="smoke1" mixin="smoke" geometry="radius: 10" position="0 1.4 0" animation__rotate="dur: 200000"></a-entity>
<a-entity id="smoke2" mixin="smoke" geometry="radius: 20" position="0 1.8 0" animation__rotate="dur: 243000"></a-entity>
<a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
<a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>
<a-entity