Make the ships explode
This commit is contained in:
parent
8630a9b66c
commit
52691e8f0b
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 = [];
|
||||||
|
|
Loading…
Reference in New Issue
Block a user