geometry

webclient/src/spaceport/Laser.js

@@ -9,23 +9,22 @@ const geometry = new THREE.BoxGeometry(
 	LASER_SIZE
 );
 
-const material = new THREE.MeshStandardMaterial(this.direction > 0 ? 0xff0000 : 0x0000ff, { flatShading: true })
-
 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);
 
-		this.mesh = new THREE.Mesh(
-			geometery,
-			material
-		);
+		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%)`)
@@ -39,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;
 		}
 	}

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) {