[wip] 🎨 : music aviator (#7)

* 🎨 : music aviator

* 🌱 : a little of shaders

* 🌱 : a little of setup

* save

Co-authored-by: NOPR9D <contact@boucham-amine.fr>

Author: NOPR9D ☄️

package-lock.json

@@ -4,7 +4,8 @@
   "description": "Animations used by all mylabz.xyz's websites",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve":"webpack serve"
   },
   "repository": {
     "type": "git",
@@ -19,6 +20,7 @@
   "dependencies": {
     "@types/three": "^0.141.0",
     "glslify": "^7.1.1",
+    "rxjs": "^7.5.5",
     "three": "^0.141.0"
   },
   "devDependencies": {

package.json

@@ -0,0 +1 @@
+export * from './musicAviator'

threejs/games/index.ts

@@ -0,0 +1,88 @@
+import { MusicAviatorOptions } from '.';
+import {
+  BoxGeometry,
+  Clock,
+  Color,
+  Mesh,
+  PerspectiveCamera,
+  PlaneBufferGeometry,
+  Scene,
+  SpotLight,
+  WebGLRenderer
+} from 'three';
+import { EngineBluePrint } from '../../models';
+import { Engine } from './services';
+
+export class MusicAviator {
+  private scene!: Scene;
+  private camera!: PerspectiveCamera;
+  private geometry!: PlaneBufferGeometry | BoxGeometry;
+  private light!: SpotLight;
+  private material!: any;
+  private mesh!: Mesh;
+  private renderer!: WebGLRenderer;
+  private clock!: Clock;
+
+  private options: MusicAviatorOptions = {
+    backgroundColor: new Color(0xffffff),
+    speed: 0.1
+  };
+
+  private engine!: EngineBluePrint;
+  constructor(options?: MusicAviatorOptions) {
+    if (options) {
+      this.options = { ...this.options, ...options };
+    }
+  }
+
+  public async init(canvas?: HTMLElement) {
+    this.scene = new Scene();
+    this.scene.background = this.options.backgroundColor
+    this.light = new SpotLight(this.options.backgroundColor, 1);
+
+    const fov = 45;
+    const aspect = window.innerWidth / window.innerHeight;
+    const near = 1;
+    const far = 100;
+    this.camera = new PerspectiveCamera(fov, aspect, near, far);
+
+    this.renderer = new WebGLRenderer({
+      canvas: canvas
+    });
+    this.renderer.setClearColor(this.options.backgroundColor, 1);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+
+    this.clock = new Clock();
+
+    await this.runEngine();
+  }
+
+  public run() {
+    window.requestAnimationFrame(this.run.bind(this));
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  public setOptions(options: MusicAviatorOptions) {
+    if (options && Object.keys(options).length > 0) {
+      this.options = { ...this.options, ...options };
+    }
+  }
+
+  private  runEngine() {
+    this.engine = new Engine();
+    return this.engine.importSceneCameraRenderer(this.scene, this.camera, this.renderer).init();
+  }
+  private addEvents(): void {
+    window.addEventListener('resize', this.onResize.bind(this), false);
+  }
+
+  private onResize() {
+    this.material.uniforms.uResolution = {
+      value: { x: window.innerWidth, y: window.innerHeight }
+    };
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+  }
+}

threejs/games/musicAviator/app.ts

@@ -0,0 +1,47 @@
+import { LoadingManager } from 'three';
+import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+
+export class AirPlane {
+	public mesh!: GLTF;
+	private loader: GLTFLoader;
+	private loadingManager: LoadingManager;
+
+	constructor() {
+		this.loadingManager = new LoadingManager();
+		this.loader = new GLTFLoader(this.loadingManager);
+		const dracoLoader = new DRACOLoader();
+		dracoLoader.setDecoderPath('/js/libs/draco/');
+		this.loader.setDRACOLoader(dracoLoader);
+	}
+
+	public createAsync() {
+		return new Promise((res, err) => {
+			this.loader.load(
+				'/three/Ship.glb',
+				(gltf) => {
+					gltf.scene.scale.set(1.5, 1.5, 1.5);
+					gltf.scene.position.set(0, 100, 0);
+					gltf.scene.traverse((child) => {
+						if (child.isObject3D) {
+							child.receiveShadow = true;
+							child.castShadow = true;
+						}
+					});
+					this.mesh = gltf;
+					res(true);
+				},
+				// called while loading is progressing
+				(xhr) => {
+					console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
+				},
+				// called when loading has errors
+				(error) => {
+					console.log(error);
+					console.log('An error happened');
+					err(false);
+				}
+			);
+		});
+	}
+}

threejs/games/musicAviator/assets/index.ts

@@ -0,0 +1,47 @@
+import { BoxBufferGeometry, BoxGeometry, Mesh, MeshPhongMaterial } from 'three';
+
+export class Cloud {
+	public geom: BoxGeometry;
+	public mesh: Mesh;
+	public material: MeshPhongMaterial;
+	public nBlocs = 3 + Math.floor(Math.random() * 3);
+
+	constructor(colors: any) {
+		this.mesh = new Mesh();
+		this.mesh.name = 'cloud';
+		// create the geometry (shape) of the cylinder;
+		// the parameters are:
+		// radius top, radius bottom, height, number of segments on the radius, number of segments vertically
+		this.geom = new BoxBufferGeometry(20, 20, 20);
+		this.material = new MeshPhongMaterial({
+			color: colors.white,
+			flatShading: true,
+		});
+		for (let i = 0; i < this.nBlocs; i++) {
+			// create the mesh by cloning the geometry
+			const m = new Mesh(this.geom, this.material);
+			// set the position and the rotation of each cube randomly
+			m.position.x = i * 15;
+			m.position.y = Math.random() * 10;
+			m.position.z = Math.random() * 10;
+			m.rotation.z = Math.random() * Math.PI * 2;
+			m.rotation.y = Math.random() * Math.PI * 2;
+			// set the size of the cube randomly
+			const s = 0.1 + Math.random() * 0.9;
+			m.scale.set(s, s, s);
+			// allow each cube to cast and to receive shadows
+			m.castShadow = true;
+			m.receiveShadow = true;
+			// add the cube to the container we first created
+			this.mesh.add(m);
+		}
+	}
+	public rotate() {
+		this.mesh.children.forEach((children, index) => {
+			this.mesh.children[index].rotation.z +=
+				Math.random() * 0.005 * (index + 1);
+			this.mesh.children[index].rotation.y +=
+				Math.random() * 0.002 * (index + 1);
+		});
+	}
+}

threejs/games/musicAviator/audio/index.ts

@@ -0,0 +1,34 @@
+import {
+	Mesh,
+	MeshPhongMaterial,
+	Object3D,
+	TetrahedronBufferGeometry,
+} from 'three';
+import { ThreeObject } from '../../../models';
+
+export class Ennemy implements ThreeObject {
+	public geom: TetrahedronBufferGeometry;
+	public mesh: Object3D;
+	public material: MeshPhongMaterial;
+	public angle: number;
+	public dist: number;
+	public color: any;
+	constructor(color: any) {
+		this.color = color;
+		this.geom = new TetrahedronBufferGeometry();
+		this.material = new MeshPhongMaterial({
+			color: this.color,
+			shininess: 0,
+			specular: 0xffffff,
+			flatShading: true,
+		});
+		this.mesh = new Mesh(this.geom, this.material);
+		this.mesh.castShadow = true;
+		this.angle = 0;
+		this.dist = 0;
+	}
+
+	public update(t: number): void {
+		console.log('update');
+	}
+}

threejs/games/musicAviator/entities/AirPlane.ts

@@ -0,0 +1,43 @@
+import { AmbientLight, DirectionalLight, HemisphereLight } from 'three';
+import { ThreeObject } from '../../../models';
+
+export class Light implements ThreeObject {
+	public hemisphereLight: HemisphereLight;
+	public shadowLight: DirectionalLight;
+	public ambiantLight: AmbientLight;
+
+	constructor() {
+		// A hemisphere light is a gradient colored light;
+		// the first parameter is the sky color, the second parameter is the ground color,
+		// the third parameter is the intensity of the light
+		this.hemisphereLight = new HemisphereLight(0xaaaaaa, 0x000000, 0.9);
+
+		// A directional light shines from a specific direction.
+		// It acts like the sun, that means that all the rays produced are parallel.
+		this.shadowLight = new DirectionalLight(0xffffff, 0.9);
+
+		this.ambiantLight = new AmbientLight(0xdc8874, 0.5);
+		// Set the direction of the light
+		this.shadowLight.position.set(150, 350, 350);
+
+		// Allow shadow casting
+		this.shadowLight.castShadow = true;
+
+		// define the visible area of the projected shadow
+		this.shadowLight.shadow.camera.left = -400;
+		this.shadowLight.shadow.camera.right = 400;
+		this.shadowLight.shadow.camera.top = 400;
+		this.shadowLight.shadow.camera.bottom = -400;
+		this.shadowLight.shadow.camera.near = 1;
+		this.shadowLight.shadow.camera.far = 1000;
+
+		// define the resolution of the shadow; the higher the better,
+		// but also the more expensive and less performant
+		this.shadowLight.shadow.mapSize.width = 2048;
+		this.shadowLight.shadow.mapSize.height = 2048;
+	}
+
+	public update(t: number) {
+		// Nothing to do
+	}
+}

threejs/games/musicAviator/entities/Cloud.ts

@@ -0,0 +1,43 @@
+import { Object3D } from 'three';
+import { Cloud } from './Cloud';
+
+export class Sky {
+	public mesh: Object3D;
+	public nClouds = 20;
+	public stepAngle = (Math.PI * 2) / this.nClouds;
+	public clouds: Cloud[] = [];
+
+	constructor(colors: any) {
+		this.mesh = new Object3D();
+		// create the clouds
+		for (let i = 0; i < this.nClouds; i++) {
+			const c = new Cloud(colors);
+			// set the rotation and the position of each cloud;
+			// for that we use a bit of trigonometry
+			const a = this.stepAngle * i; // this is the final angle of the cloud
+			const h = 750 + Math.random() * 200; // this is the distance between the center of the axis and the cloud itself
+			// Trigonometry!!! I hope you remember what you've learned in Math :)
+			// in case you don't:
+			// we are simply converting polar coordinates (angle, distance) into Cartesian coordinates (x, y)
+			c.mesh.position.y = Math.sin(a) * h;
+			c.mesh.position.x = Math.cos(a) * h;
+			// rotate the cloud according to its position
+			c.mesh.rotation.z = a + Math.PI / 2;
+			// for a better result, we position the clouds
+			// at random depths inside of the scene
+			c.mesh.position.z = -400 - Math.random() * 400;
+			// we also set a random scale for each cloud
+			const s = 1 + Math.random() * 2;
+			c.mesh.scale.set(s, s, s);
+			// do not forget to add the mesh of each cloud in the scene
+			this.clouds.push(c);
+			this.mesh.add(c.mesh);
+		}
+	}
+
+	public moveClouds() {
+		this.clouds.forEach((cloud, index) => {
+			this.clouds[index].rotate();
+		});
+	}
+}