Make the ships explode

This commit is contained in:
Tanner Collin 2021-03-22 00:20:39 +00:00
parent 8630a9b66c
commit 52691e8f0b
3 changed files with 33 additions and 19 deletions

View File

@ -127,7 +127,7 @@ body {
@media (min-width: 650px) { @media (min-width: 650px) {
.footer-content { .footer-content {
transition: all 0.2s ease-in; transition: all 0.2s ease-in;
opacity: 0.25; opacity: 0.5;
} }
.footer-content:hover { .footer-content:hover {

View File

@ -20,12 +20,17 @@ export class Ship {
shipGeo, shipGeo,
new THREE.MeshStandardMaterial(this.direction > 0 ? 0xff0000 : 0x0000ff, { flatShading: true }) new THREE.MeshStandardMaterial(this.direction > 0 ? 0xff0000 : 0x0000ff, { flatShading: true })
); );
this.y = (Math.random() - 0.5) * 2;
this.x = (Math.random() - 0.5) * 2; this.burstGeo = new THREE.SphereGeometry(0.1, 32, 32);
this.y = (Math.random() - 0.5) * 4;
this.x = (Math.random() - 0.5) * 4;
this.mesh.material.color.set( this.mesh.material.color.set(
new THREE.Color(`hsl(${direction > 0 ? 0 : 180},30%,40%)`) new THREE.Color(`hsl(${direction > 0 ? 0 : 180},30%,40%)`)
); );
this.mesh.material.opacity = 1;
this.mesh.position.y = this.y; this.mesh.position.y = this.y;
this.mesh.position.x = this.x; 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()
@ -52,11 +57,15 @@ export class Ship {
this.life -= deltaTime; this.life -= deltaTime;
if (!this.flyIn) { if (!this.flyIn) {
this.mesh.material.color.set(
new THREE.Color(`hsl(${this.direction > 0 ? 0 : 180},30%,20%)`)
);
const xs = Math.sin(this.life * 0.5 + this.x); 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.2; 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.position.x = this.x + xs * 0.15;
this.mesh.rotation.x = yrot * 0.15; this.mesh.rotation.x = yrot * 0.05;
this.mesh.position.z += 0.01 * this.direction; this.mesh.position.z += 0.01 * this.direction;
this.nextShot -= deltaTime; this.nextShot -= deltaTime;
if (this.nextShot <= 0) { if (this.nextShot <= 0) {
@ -65,17 +74,17 @@ export class Ship {
} }
} }
if (this.life < 0) { if (this.life < 0 && !this.flyin) {
const a = Math.abs(this.life); this.mesh.geometry = this.burstGeo;
this.mesh.position.z += a * 2 * this.direction; this.mesh.scale.x *= 1.1;
this.mesh.scale.z = a * 4; this.mesh.scale.y *= 1.1;
this.firing = false; this.mesh.scale.z *= 1.1;
this.mesh.rotation.y = 0; this.mesh.material.transparent = true;
this.mesh.rotation.x = 0; this.mesh.material.opacity *= 0.95;
} }
if (Math.abs(this.mesh.position.z > 475/2)) { if (this.mesh.scale.x > 10) {
this.kill = true; this.kill = true;
} }
} }

View File

@ -22,17 +22,22 @@ export const scene = ({ ref }) => {
const camera = new THREE.PerspectiveCamera(65, width / height, 0.01, 1000); const camera = new THREE.PerspectiveCamera(65, width / height, 0.01, 1000);
camera.position.set(5, 0.5, 1); camera.position.set(5, 2, 1);
camera.lookAt(new THREE.Vector3(-9, 0, 3));
camera.lookAt(new THREE.Vector3(0, 0, 0)); camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera); scene.add(camera);
ref.current.appendChild(renderer.domElement); ref.current.appendChild(renderer.domElement);
const light = new THREE.DirectionalLight('#fff', 1); const light1 = new THREE.DirectionalLight('#fff', 1);
light.position.x = 3; light1.position.x = 3;
light.position.z = 1; light1.position.z = 1;
scene.add(light); scene.add(light1);
const light2 = new THREE.PointLight('#fff', 2);
light2.position.x = 5;
light2.position.y = 5;
light2.position.z = 1;
scene.add(light2);
let ships = []; let ships = [];
let bolts = []; let bolts = [];