📷

webclient/src/Footer.js

@@ -1,69 +1,14 @@
 import React, { useRef, useEffect } from 'react';
 import { Container, Icon } from 'semantic-ui-react';
-import * as THREE from 'three/build/three.module';
+
-import { Ship } from './spaceport/Ship';
+import { scene } from './spaceport/scene';
 
 export const Footer = () => {
 	const footerRef = useRef();
 
 	useEffect(() => {
 		if (!footerRef.current) return;
-
+		scene({ ref: footerRef });
-		let t = 0.01;
-		const shipInterval = 2;
-		let nextShip = shipInterval;
-
-		var scene = new THREE.Scene();
-		const renderer = new THREE.WebGLRenderer({ antialias: true });
-		renderer.setSize(
-			footerRef.current.clientWidth,
-			footerRef.current.clientHeight
-		);
-
-		const camera = new THREE.PerspectiveCamera(65, 1, 0.01, 1000);
-		camera.position.set(4, 1, 4);
-		camera.lookAt(new THREE.Vector3(-8, 0, -2));
-
-		scene.add(camera);
-
-		footerRef.current.appendChild(renderer.domElement);
-
-		let ships = [];
-		const ship = new Ship();
-		scene.add(ship.mesh);
-		ships.push(ship);
-
-		const animate = () => {
-			const deltaTime = 0.075;
-			t += deltaTime;
-
-			// get mouse
-
-			if (t > nextShip) {
-				console.log('bing');
-				const ship = new Ship();
-				scene.add(ship.mesh);
-				ships.push(ship);
-				nextShip += shipInterval + (Math.random() - 0.5) * 2;
-			}
-
-			for (const ship of ships) {
-				ship.update({ deltaTime });
-				if (ship.kill) {
-					console.log('killing ship');
-					scene.remove(ship.mesh);
-				}
-			}
-
-			ships = ships.filter((s) => !s.kill);
-
-			requestAnimationFrame(animate);
-			renderer.render(scene, camera);
-		};
-
-		animate();
-
-		renderer.render(scene, camera);
 	}, [footerRef]);
 
 	return (

webclient/src/spaceport/Ship.js

@@ -4,12 +4,12 @@ const SHIP_SIZE = 1;
 
 export class Ship {
 	constructor() {
-		this.life = Math.random() * 5 + 3;
+		this.life = Math.random() * 5 + 7;
 		this.flyIn = true;
 
 		const shipGeo = new THREE.BoxGeometry(
-			SHIP_SIZE * 0.3,
+			SHIP_SIZE * 0.1,
-			SHIP_SIZE * 0.3,
+			SHIP_SIZE * 0.1,
 			SHIP_SIZE
 		);
 		this.mesh = new THREE.Mesh(
@@ -39,7 +39,7 @@ export class Ship {
 				this.flyIn = false;
 				this.mesh.scale.z = 0.5;
 				this.mesh.material.color.set(
-					new THREE.Color(`hsl(${this.hue},70%,100%)`)
+					new THREE.Color(`hsl(${this.hue},0%,30%)`)
 				);
 			}
 		} else {
@@ -58,7 +58,7 @@ export class Ship {
 			// accelerate away
 		}
 
-		if (this.mesh.position.z > 5) {
+		if (this.mesh.position.z > 55) {
 			this.kill = true;
 		}
 	}

webclient/src/spaceport/scene.js

@@ -0,0 +1,69 @@
+import * as THREE from 'three/build/three.module';
+import { Ship } from './Ship';
+
+export const scene = ({ ref }) => {
+	let t = 0.01;
+	const shipInterval = 2;
+	let nextShip = shipInterval;
+
+	var scene = new THREE.Scene();
+	const renderer = new THREE.WebGLRenderer({ antialias: true });
+	const width = ref.current.clientWidth;
+	const height = ref.current.clientHeight;
+	renderer.setSize(width, height);
+
+	const camera = new THREE.PerspectiveCamera(65, width / height, 0.01, 1000);
+	camera.position.set(3, 0.5, 5);
+	camera.lookAt(new THREE.Vector3(-9, 0, 3));
+	scene.add(camera);
+
+	ref.current.appendChild(renderer.domElement);
+
+	var sphere = new THREE.SphereBufferGeometry(1);
+	var object = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial(0xff0000));
+	var boxHelp = new THREE.BoxHelper(object, 0xffff00);
+	// scene.add(boxHelp);
+
+	let ships = [];
+	const ship = new Ship();
+	scene.add(ship.mesh);
+	ships.push(ship);
+
+	const animate = () => {
+		const deltaTime = 0.075;
+		t += deltaTime;
+
+		// register mouse event for 'onmove'
+		// get mouse x & y
+		// const mu = mousex / ref.width
+		// const mv = mousey / ref.heigh
+
+		// camera.x = sin(mu * Math.PI * 2)
+		// camera.z = cos(mu * Math.PI * 2)
+
+		if (t > nextShip) {
+			console.log('bing');
+			const ship = new Ship();
+			scene.add(ship.mesh);
+			ships.push(ship);
+			nextShip += shipInterval + (Math.random() - 0.5) * 2;
+		}
+
+		for (const ship of ships) {
+			ship.update({ deltaTime });
+			if (ship.kill) {
+				console.log('killing ship');
+				scene.remove(ship.mesh);
+			}
+		}
+
+		ships = ships.filter((s) => !s.kill);
+
+		requestAnimationFrame(animate);
+		renderer.render(scene, camera);
+	};
+
+	animate();
+
+	renderer.render(scene, camera);
+};