refactor: reorder portal pc screen effect

Neosoulink · Dec 10, 2023 · 95de5d2 · 95de5d2
1 parent 80dae3b
commit 95de5d2
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 170 deletions.
diff --git a/src/experiences/factories/ExperienceBased.factory.ts b/src/experiences/factories/ExperienceBased.factory.ts
@@ -1,11 +1,16 @@
-//
+import { EventEmitter } from "events";
+
+// BLUEPRINTS
 import type { ExperienceFactory } from "./Experience.factory";
 
 // INTERFACES
 import type { ExperienceBase } from "@/interfaces/experienceBase";
 
 /** Represent a class that depend on {@link ExperienceFactory}. */
-export abstract class ExperienceBasedFactory implements ExperienceBase {
+export abstract class ExperienceBasedFactory
+	extends EventEmitter
+	implements ExperienceBase
+{
 	protected abstract readonly _experience: ExperienceFactory;
 
 	public abstract construct(): unknown;

diff --git a/src/experiences/pages/Home/Debug.ts b/src/experiences/pages/Home/Debug.ts
@@ -1,5 +1,6 @@
 import {
 	BufferGeometry,
+	CameraHelper,
 	Line,
 	LineBasicMaterial,
 	Mesh,
@@ -8,7 +9,7 @@ import {
 	SphereGeometry,
 	Vector3,
 } from "three";
-import GUI from "lil-gui";
+import GUI from "three/examples/jsm/libs/lil-gui.module.min.js";
 
 // EXPERIENCE
 import Experience from ".";
@@ -20,6 +21,7 @@ export default class Debug implements ExperienceBase {
 	protected readonly _experience = new Experience();
 	protected readonly _appDebug = this._experience.app.debug;
 	protected readonly _appCamera = this._experience.app.camera;
+	protected _worldSecondaryCameraHelper?: CameraHelper;
 
 	/** Graphic user interface of the experience instance */
 	protected _gui?: GUI;
@@ -50,15 +52,18 @@ export default class Debug implements ExperienceBase {
 
 		if (!this._gui || !this._experience.world) return;
 
-		// this._gui.add(
-		// 	{ destruct_experience: () => this._experience?.destruct() },
-		// 	"destruct_experience"
-		// );
-
 		this.cameraLookAtPointIndicator = new Mesh(
 			new SphereGeometry(0.1, 12, 12),
 			new MeshBasicMaterial({ color: "#ff0040" })
 		);
+		this.cameraLookAtPointIndicator.visible = false;
+
+		if (!this._experience.world?.secondaryCamera) return;
+
+		this._worldSecondaryCameraHelper = new CameraHelper(
+			this._experience.world.secondaryCamera
+		);
+		this._experience.app.scene.add(this._worldSecondaryCameraHelper);
 
 		this._gui
 			.add(
@@ -120,17 +125,6 @@ export default class Debug implements ExperienceBase {
 			)
 			.name("Toggle auto camera animation");
 
-		this._gui
-			.add(
-				{
-					fn: () => {
-						this._experience.world?.nextScene();
-					},
-				},
-				"fn"
-			)
-			.name("Next Scene");
-
 		this._experience.app.scene.add(
 			this._cameraCurvePathLine,
 			this.cameraLookAtPointIndicator

diff --git a/src/experiences/pages/Home/Renderer.ts b/src/experiences/pages/Home/Renderer.ts
@@ -9,7 +9,6 @@ import {
 	Vector3,
 	WebGLRenderTarget,
 } from "three";
-import * as CameraUtils from "three/examples/jsm/utils/CameraUtils";
 
 // EXPERIENCE
 import HomeExperience from ".";
@@ -21,7 +20,6 @@ export interface PortalAssets {
 	mesh: THREE.Mesh;
 	meshWebGLTexture: THREE.WebGLRenderTarget;
 	meshCamera: THREE.PerspectiveCamera;
-	projectedCamera: THREE.PerspectiveCamera;
 }
 
 export interface PortalMeshCorners {
@@ -90,7 +88,6 @@ export default class Renderer implements ExperienceBase {
 							this._renderPortalAssets[key].assets.mesh,
 							this._renderPortalAssets[key].assets.meshWebGLTexture,
 							this._renderPortalAssets[key].assets.meshCamera,
-							this._renderPortalAssets[key].assets.projectedCamera,
 							this._renderPortalAssets[key].corners
 						);
 						// restore the original rendering properties
@@ -115,21 +112,8 @@ export default class Renderer implements ExperienceBase {
 		mesh: Mesh,
 		meshWebGLTexture: WebGLRenderTarget,
 		portalCamera: PerspectiveCamera,
-		projectedCamera: PerspectiveCamera,
 		corners: PortalMeshCorners
 	) {
-		projectedCamera.updateProjectionMatrix();
-		// Set the portal camera position to be reflected about the portal plane
-		mesh.worldToLocal(
-			this._portalReflectedPosition.copy(
-				projectedCamera?.position ?? new Vector3()
-			)
-		);
-		projectedCamera.lookAt(new Vector3());
-
-		mesh.localToWorld(this._portalReflectedPosition);
-		portalCamera.position.copy(this._portalReflectedPosition);
-
 		mesh.localToWorld(
 			this._portalBottomLeftCorner.set(
 				corners.bottomLeft.x,
@@ -152,15 +136,6 @@ export default class Renderer implements ExperienceBase {
 			)
 		);
 
-		// Set the projection matrix to encompass the portal's frame
-		CameraUtils.frameCorners(
-			projectedCamera,
-			this._portalBottomLeftCorner,
-			this._portalBottomRightCorner,
-			this._portalTopLeftCorner,
-			false
-		);
-
 		this._appRendererInstance.setRenderTarget(meshWebGLTexture);
 		this._appRendererInstance.state.buffers.depth.setMask(true);
 		if (this._appRendererInstance.autoClear === false)

diff --git a/src/experiences/pages/Home/World/Scene_1.ts b/src/experiences/pages/Home/World/Scene_1.ts
@@ -1,11 +1,13 @@
 import {
 	CatmullRomCurve3,
 	Color,
+	Group,
 	Material,
 	Mesh,
 	MeshBasicMaterial,
 	NoColorSpace,
 	PerspectiveCamera,
+	PlaneGeometry,
 	RawShaderMaterial,
 	Vector3,
 	WebGLRenderTarget,
@@ -25,6 +27,11 @@ import vertex from "./shaders/scene1/vertex.vert";
 export default class Scene_1 extends SceneFactory {
 	protected _renderer = this._experience.renderer;
 
+	public pcScreenWebglTexture?: WebGLRenderTarget;
+	public pcScreen?: Mesh;
+
+	modelScene2?: Group;
+
 	constructor() {
 		try {
 			super({
@@ -42,7 +49,7 @@ export default class Scene_1 extends SceneFactory {
 						linkedTextureName: "scene_1_room_baked_texture",
 					},
 					{
-						childName: "scene_1_room_woods",
+						childName: "scene_1_woods",
 						linkedTextureName: "scene_1_room_woods_baked_texture",
 					},
 				],
@@ -55,34 +62,33 @@ export default class Scene_1 extends SceneFactory {
 		this.modelScene = this._model?.scene.clone();
 		if (!this.modelScene) return;
 
-		this.cameraPath.getPointAt(0, this._appCamera.instance.position);
-		this._appCamera.instance.position.y += 8;
-		this._appCamera.instance.position.x -= 2;
-		this._appCamera.instance.position.z += 10;
-
 		try {
 			this.modelScene.children.forEach((child) => {
-				if (child.name === "scene_1_room_pc_screen")
+				if (child.name === "scene_1_pc_screen")
 					throw new Error("CHILD_FOUND", { cause: child });
 			});
 		} catch (_err) {
 			if (_err instanceof Error && _err.cause instanceof Mesh) {
-				const mesh = _err.cause;
-				const camera = new PerspectiveCamera(75, 1.0, 0.1, 500.0);
-				const texture = new WebGLRenderTarget(256, 256);
-				mesh.material = new MeshBasicMaterial({ map: texture.texture });
-
-				this._renderer?.addPortalMeshAssets(Scene_1.name + "_screen_pc", {
-					mesh,
-					camera,
-					texture,
+				const planeGeo = new PlaneGeometry(1.25, 0.6728);
+				this.pcScreenWebglTexture = new WebGLRenderTarget(4096, 4096);
+				this.pcScreen = new Mesh(planeGeo);
+				this.pcScreen.material = new MeshBasicMaterial({
+					map: this.pcScreenWebglTexture.texture,
 				});
+
+				// TODO:: Correctly setup the portal by passing the texture to the screen it self
+				this.pcScreen.rotateY(Math.PI * 0.271);
+				this.pcScreen.rotateX(Math.PI * -0.03);
+				this.pcScreen.position.z += 0.048;
+				this.pcScreen.position.x -= 0.01;
+				_err.cause.localToWorld(this.pcScreen.position);
+				_err.cause.removeFromParent();
+
+				this.modelScene.add(this.pcScreen);
 			}
 		}
 
 		this._setModelMaterials();
-		this._experience.world?.group?.add(this.modelScene);
-
 		this.emit("constructed");
 	}
 

diff --git a/src/experiences/pages/Home/World/Scene_2.ts b/src/experiences/pages/Home/World/Scene_2.ts
@@ -19,31 +19,26 @@ export default class Scene_2 extends SceneFactory {
 					new Vector3(12, 3.7, 12),
 					new Vector3(0, 5.5, 21),
 				]),
+				modelName: "scene_1_room",
 				modelChildrenTextures: [
 					{
 						childName: "scene_1_room",
 						linkedTextureName: "scene_1_room_baked_texture",
 					},
+					{
+						childName: "scene_1_woods",
+						linkedTextureName: "scene_1_room_woods_baked_texture",
+					},
 				],
 			});
 		} catch (error) {}
 	}
 
 	construct() {
-		if (!this._appCamera.instance) return;
-
-		const ISOMETRIC_ROOM = this._experience.app.resources.items.scene_1_room as
-			| GLTF
-			| undefined;
-
-		this.cameraPath.getPointAt(0, this._appCamera.instance.position);
-		this._appCamera.instance.position.y += 8;
-		this._appCamera.instance.position.x -= 2;
-		this._appCamera.instance.position.z += 10;
+		this.modelScene = this._model?.scene.clone();
+		if (!this.modelScene) return;
 
-		this.model = ISOMETRIC_ROOM;
-		this.modelScene = this.model?.scene.clone();
-		this.modelScene && this._experience.world?.group?.add(this.modelScene);
+		this.modelScene.position.set(20, 0, 0);
 
 		this._setModelMaterials();
 		this.emit("constructed");

diff --git a/src/experiences/pages/Home/World/Scene_3.ts b/src/experiences/pages/Home/World/Scene_3.ts
@@ -1,5 +1,4 @@
 import { CatmullRomCurve3, PerspectiveCamera, Vector3 } from "three";
-import { type GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 import GSAP from "gsap";
 
 // EXPERIENCES
@@ -19,31 +18,26 @@ export default class Scene_3 extends SceneFactory {
 					new Vector3(12, 3.7, 12),
 					new Vector3(0, 5.5, 21),
 				]),
+				modelName: "scene_1_room",
 				modelChildrenTextures: [
 					{
 						childName: "scene_1_room",
 						linkedTextureName: "scene_1_room_baked_texture",
 					},
+					{
+						childName: "scene_1_woods",
+						linkedTextureName: "scene_1_room_woods_baked_texture",
+					},
 				],
 			});
 		} catch (error) {}
 	}
 
 	construct() {
-		if (!this._appCamera.instance) return;
-
-		const ISOMETRIC_ROOM = this._experience.app.resources.items.scene_1_room as
-			| GLTF
-			| undefined;
-
-		this.cameraPath.getPointAt(0, this._appCamera.instance.position);
-		this._appCamera.instance.position.y += 8;
-		this._appCamera.instance.position.x -= 2;
-		this._appCamera.instance.position.z += 10;
+		this.modelScene = this._model?.scene.clone();
+		if (!this.modelScene) return;
 
-		this.model = ISOMETRIC_ROOM;
-		this.modelScene = this.model?.scene.clone();
-		this.modelScene && this._experience.world?.group?.add(this.modelScene);
+		this.modelScene.position.set(18, 0, 0);
 
 		this._setModelMaterials();
 		this.emit("constructed");