diff --git a/webclient/src/spaceport/Laser.js b/webclient/src/spaceport/Laser.js index c38aad0..7f82a80 100644 --- a/webclient/src/spaceport/Laser.js +++ b/webclient/src/spaceport/Laser.js @@ -3,26 +3,28 @@ import * as THREE from 'three'; 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 +); + export class Laser { constructor(ship) { const position = new THREE.Vector3(); this.direction = ship.direction; this.kill = false; - this.stepX = (Math.random()-0.5) * BULLET_SPREAD; - this.stepY = (Math.random()-0.5) * BULLET_SPREAD; + this.stepX = (Math.random() - 0.5) * BULLET_SPREAD; + this.stepY = (Math.random() - 0.5) * BULLET_SPREAD; - ship.mesh.getWorldPosition(position) + ship.mesh.getWorldPosition(position); - const shipGeo = new THREE.BoxGeometry( - LASER_SIZE * 0.03, - LASER_SIZE * 0.03, - LASER_SIZE - ); - this.mesh = new THREE.Mesh( - shipGeo, - new THREE.MeshStandardMaterial(this.direction > 0 ? 0xff0000 : 0x0000ff, { flatShading: true }) - ); + const material = new THREE.MeshStandardMaterial(0xffffff, { + flatShading: true, + }); + + this.mesh = new THREE.Mesh(geometry, material); this.mesh.material.color.set( new THREE.Color(`hsl(${ship.direction > 0 ? 0 : 180},100%,70%)`) @@ -36,7 +38,7 @@ export class Laser { this.mesh.position.y += this.stepY; this.mesh.position.z += 0.5 * this.direction; - if (Math.abs(this.mesh.position.z > 475/2)) { + if (Math.abs(this.mesh.position.z > 475 / 2)) { this.kill = true; } } diff --git a/webclient/src/spaceport/Ship.js b/webclient/src/spaceport/Ship.js index e2a5eea..1f324e0 100644 --- a/webclient/src/spaceport/Ship.js +++ b/webclient/src/spaceport/Ship.js @@ -2,6 +2,14 @@ import * as THREE from 'three'; const SHIP_SIZE = 1; +const geometry = new THREE.BoxGeometry( + SHIP_SIZE * 0.1, + SHIP_SIZE * 0.1, + SHIP_SIZE +); + +const burstGeo = new THREE.SphereGeometry(0.1, 32, 32); + export class Ship { constructor(direction) { this.direction = direction; @@ -10,18 +18,13 @@ export class Ship { this.shotInterval = 3; this.flyIn = true; this.firing = false; + this.exploded = false; - const shipGeo = new THREE.BoxGeometry( - SHIP_SIZE * 0.1, - SHIP_SIZE * 0.1, - SHIP_SIZE - ); - this.mesh = new THREE.Mesh( - shipGeo, - new THREE.MeshStandardMaterial(this.direction > 0 ? 0xff0000 : 0x0000ff, { flatShading: true }) - ); + const material = new THREE.MeshStandardMaterial(0xffffff, { + flatShading: true, + }); - this.burstGeo = new THREE.SphereGeometry(0.1, 32, 32); + this.mesh = new THREE.Mesh(geometry, material); this.y = (Math.random() - 0.5) * 4; this.x = (Math.random() - 0.5) * 4; @@ -33,7 +36,7 @@ export class Ship { this.mesh.position.y = this.y; this.mesh.position.x = this.x; - this.mesh.position.z = (-475/4 - 6) * this.direction; //+ Math.random() + this.mesh.position.z = (-475 / 4 - 6) * this.direction; //+ Math.random() } update({ deltaTime }) { @@ -41,14 +44,9 @@ export class Ship { this.mesh.scale.z = 10; this.mesh.position.z += 4.75 * this.direction; - // ship accelerating decreasing - // check if in space if (Math.abs(this.mesh.position.z) <= 6 && this.flyIn) { this.flyIn = false; this.mesh.scale.z = 0.5; - //this.mesh.material.color.set( - // new THREE.Color(`hsl(${this.hue},0%,30%)`) - //); } } else { this.mesh.scale.z = 0.5; @@ -62,7 +60,9 @@ export class Ship { ); const xs = Math.sin(this.life * 0.5 + this.x); - const yrot = Math.sin(this.life + this.x + (3.14/2 * this.direction)); + const yrot = Math.sin( + this.life + this.x + (3.14 / 2) * this.direction + ); this.mesh.position.y = this.y + Math.sin(this.life + this.y) * 0.1; this.mesh.position.x = this.x + xs * 0.15; this.mesh.rotation.x = yrot * 0.05; @@ -74,14 +74,20 @@ export class Ship { } } - if (this.life < 0 && !this.flyin) { - this.mesh.geometry = this.burstGeo; + if (this.life < 0 && !this.flyin && !this.exploded) { + this.mesh.geometry = burstGeo; + this.mesh.material.transparent = true; + this.mesh.material.opacity *= 0.95; + this.exploded = true; + this.mesh.scale.x = 1; + this.mesh.scale.y = 1; + this.mesh.scale.z = 1; + } + + if (this.exploded) { this.mesh.scale.x *= 1.1; this.mesh.scale.y *= 1.1; this.mesh.scale.z *= 1.1; - - this.mesh.material.transparent = true; - this.mesh.material.opacity *= 0.95; } if (this.mesh.scale.x > 10) {