diff --git a/webclient/src/spaceport/Laser.js b/webclient/src/spaceport/Laser.js index 7f82a80..c7c7382 100644 --- a/webclient/src/spaceport/Laser.js +++ b/webclient/src/spaceport/Laser.js @@ -4,31 +4,36 @@ const LASER_SIZE = 0.5; const BULLET_SPREAD = 0.1; const geometry = new THREE.BoxGeometry( - LASER_SIZE * 0.03, - LASER_SIZE * 0.03, + LASER_SIZE * 0.3, + LASER_SIZE * 0.3, LASER_SIZE ); +const badLaserMat = new THREE.MeshStandardMaterial(0xffffff, { + flatShading: true, + color: new THREE.Color(`hsl(0,100%,70%)`), +}); + +const goodLaserMat = new THREE.MeshStandardMaterial(0xffffff, { + flatShading: true, + color: new THREE.Color(`hsl(180,100%,70%)`), +}); + export class Laser { - constructor(ship) { + constructor(ship, count) { const position = new THREE.Vector3(); this.direction = ship.direction; this.kill = false; + this.life = 20; this.stepX = (Math.random() - 0.5) * BULLET_SPREAD; this.stepY = (Math.random() - 0.5) * BULLET_SPREAD; ship.mesh.getWorldPosition(position); - const material = new THREE.MeshStandardMaterial(0xffffff, { - flatShading: true, - }); + this.mesh = new THREE.InstancedMesh(geometry, badLaserMat, count); - this.mesh = new THREE.Mesh(geometry, material); - - this.mesh.material.color.set( - new THREE.Color(`hsl(${ship.direction > 0 ? 0 : 180},100%,70%)`) - ); + this.mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); this.mesh.position.set(position.x, position.y, position.z); } @@ -37,9 +42,8 @@ export class Laser { this.mesh.position.x += this.stepX; this.mesh.position.y += this.stepY; this.mesh.position.z += 0.5 * this.direction; + this.life -= deltaTime; - if (Math.abs(this.mesh.position.z > 475 / 2)) { - this.kill = true; - } + if (this.life < 0) this.kill = true; } } diff --git a/webclient/src/spaceport/scene.js b/webclient/src/spaceport/scene.js index 9acc117..7d9164e 100644 --- a/webclient/src/spaceport/scene.js +++ b/webclient/src/spaceport/scene.js @@ -50,10 +50,12 @@ export const scene = ({ ref }) => { ref.current.addEventListener('mousemove', (e) => { const x = e.clientX; const ratio = x / ref.current.clientWidth; - camera.position.set(5, 2, ratio*4 - 2); + camera.position.set(5, 2, ratio * 4 - 2); camera.lookAt(new THREE.Vector3(0, 0, 0)); }); + let boltCount = 0; + const animate = () => { const deltaTime = 0.075; t += deltaTime; @@ -71,7 +73,10 @@ export const scene = ({ ref }) => { ship.update({ deltaTime }); if (ship.firing) { - const bolt = new Laser(ship); + const bolt = new Laser(ship, boltCount + 1); + boltCount += 1; + + console.log('pew', boltCount); bolts.push(bolt); scene.add(bolt.mesh); ship.firing = false; @@ -86,6 +91,7 @@ export const scene = ({ ref }) => { bolt.update({ deltaTime }); if (bolt.kill) { + boltCount -= 1; scene.remove(bolt.mesh); } }