Skip to content

Commit

Permalink
refactor: correct aspect on switch camera
Browse files Browse the repository at this point in the history
  • Loading branch information
@Neosoulink
Neosoulink committed Dec 17, 2023
1 parent bfdd679 commit 7692c2f
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 48 deletions.
52 changes: 43 additions & 9 deletions src/experiences/pages/Home/Camera.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,19 @@ export class Camera extends ExperienceBasedBlueprint {
protected readonly _experience = new HomeExperience();
protected readonly _appCamera = this._experience.app.camera;
protected readonly _appDebug = this._experience.app.debug;
protected _currentCameraIndex: number = 0;
protected _currentCameraIndex = 0;
protected _prevCameraProps = {
fov: 0,
aspect: 0,
near: 0,
far: 0,
};
public readonly initialCameraFov = 35;

public readonly cameras: PerspectiveCamera[] = [
(() =>
this._appCamera.instance instanceof PerspectiveCamera
? this._appCamera.instance.clone()
? new PerspectiveCamera().copy(this._appCamera.instance)
: new PerspectiveCamera())(),
(() =>
this._appCamera.instance instanceof PerspectiveCamera
Expand All @@ -42,7 +49,6 @@ export class Camera extends ExperienceBasedBlueprint {
: new PerspectiveCamera())(),
];

public readonly initialCameraFov = 35;
public lookAtPosition = new Vector3();

constructor() {
Expand All @@ -62,9 +68,14 @@ export class Camera extends ExperienceBasedBlueprint {

if (!(this._appCamera?.instance instanceof PerspectiveCamera)) return;

this._appCamera.instance.fov = this.initialCameraFov;
this._appCamera.instance.far = 500;
this.correctAspect();
this._appCamera.miniCamera?.position.set(10, 8, 30);
this._prevCameraProps = {
fov: this._appCamera.instance.fov,
aspect: this._appCamera.instance.aspect,
near: this._appCamera.instance.near,
far: this._appCamera.instance.far,
};

if (this._appDebug?.cameraControls) {
this._appDebug.cameraControls.target =
Expand Down Expand Up @@ -115,12 +126,27 @@ export class Camera extends ExperienceBasedBlueprint {
const nextCamera = this.cameras[cameraIndex];

currentCamera.copy(this._appCamera.instance);
currentCamera.fov = nextCamera.fov;
currentCamera.aspect = nextCamera.aspect;
currentCamera.near = nextCamera.near;
currentCamera.far = nextCamera.far;

this._appCamera.instance.copy(nextCamera);
this._appCamera.instance.fov = currentCamera.fov;
this._appCamera.instance.aspect = currentCamera.aspect;
this._appCamera.instance.near = currentCamera.near;
this._appCamera.instance.far = currentCamera.far;

this._appCamera.instance.fov = this._prevCameraProps.fov;
this._appCamera.instance.aspect = this._prevCameraProps.aspect;
this._appCamera.instance.near = this._prevCameraProps.near;
this._appCamera.instance.far = this._prevCameraProps.far;

this.correctAspect();
currentCamera.updateProjectionMatrix();

this._prevCameraProps = {
fov: nextCamera.fov,
aspect: nextCamera.aspect,
near: nextCamera.near,
far: nextCamera.far,
};
this._currentCameraIndex = cameraIndex;
}

Expand All @@ -138,4 +164,12 @@ export class Camera extends ExperienceBasedBlueprint {
}

update() {}

public correctAspect() {
if (!(this._appCamera.instance instanceof PerspectiveCamera)) return;

this._appCamera.instance.fov = this.initialCameraFov;
this._appCamera.instance.far = 500;
this._appCamera.resize();
}
}
2 changes: 0 additions & 2 deletions src/experiences/pages/Home/World/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,7 @@ export default class World extends ExperienceBasedBlueprint {
public scene2?: Scene_2;
public scene3?: Scene_3;
public sceneBackground?: SceneBackground;

public manager?: WorldManager;
public currentSceneIndex?: number;
/** Represent the ThreeJs `Group` containing the experience. */
public group?: Group;

Expand Down
81 changes: 46 additions & 35 deletions src/experiences/pages/Home/World/world.manager.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { CatmullRomCurve3, PerspectiveCamera, Raycaster, Vector3 } from "three";
import GSAP from "gsap";
import { CatmullRomCurve3, PerspectiveCamera, Raycaster, Vector3 } from "three";

// EXPERIENCE
import Experience from "..";

// BLUEPRINTS
import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
import type { SceneBlueprint } from "@/experiences/blueprints/Scene.blueprint";
import { CONSTRUCTED } from "@/experiences/common/Event.model";

export default class WorldManager extends ExperienceBasedBlueprint {
Expand All @@ -15,14 +16,17 @@ export default class WorldManager extends ExperienceBasedBlueprint {
protected readonly _world = this._experience.world;
protected readonly _renderer = this._experience.renderer;

rayCaster = new Raycaster();
normalizedCursorPosition = { x: 0, y: 0 };
initialLookAtPosition = new Vector3(0, 2, 0);
public currentSceneIndex = 0;
public availableScenes: SceneBlueprint[] = [];

// TODO: Reorder properties
public rayCaster = new Raycaster();
public normalizedCursorPosition = { x: 0, y: 0 };
public initialLookAtPosition = new Vector3(0, 2, 0);
/**
* The curve path of the camera
*/
cameraCurvePath = new CatmullRomCurve3([
public cameraCurvePath = new CatmullRomCurve3([
new Vector3(0, 5.5, 21),
new Vector3(12, 10, 12),
new Vector3(21, 5.5, 0),
Expand All @@ -32,48 +36,49 @@ export default class WorldManager extends ExperienceBasedBlueprint {
/**
* Current curve path position of the camera.
*/
cameraCurvePosition = new Vector3();
cameraCurvePathProgress = {
public cameraCurvePosition = new Vector3();
public cameraCurvePathProgress = {
current: 0,
target: 0,
ease: 0.1,
};

/**
* Where the camera will look at.
*/
cameraLookAtPosition = new Vector3(0, 2, 0);
public cameraLookAtPosition = new Vector3(0, 2, 0);
/**
* Enable auto curve path animation
*/
autoCameraAnimation = false;
public autoCameraAnimation = false;
/**
* GSAP animation watcher. If GSAP is currently animating
*/
isGsapAnimating = false;
public isGsapAnimating = false;
/**
* Curve path backward animation
*/
backwardCurveAnimation = false;

focusPointPositionIndex: number = 0;
focusedPosition?: Vector3;
focusedRadius = 2;
focusedAngleX = 0;
focusedAngleY = 0;

mouseDowned = false;
mouseOverBubble = false;
lastMouseCoordinate = { x: 0, y: 0 };

modelBubbles: {
public backwardCurveAnimation = false;
public focusPointPositionIndex: number = 0;
public focusedPosition?: Vector3;
public focusedRadius = 2;
public focusedAngleX = 0;
public focusedAngleY = 0;
public mouseDowned = false;
public mouseOverBubble = false;
public lastMouseCoordinate = { x: 0, y: 0 };

public modelBubbles: {
coordinates: Vector3;
DOMelement: HTMLElement;
}[] = [];

constructor() {
super();

this._world?.scene1 && this.availableScenes.push(this._world?.scene1);
this._world?.scene2 && this.availableScenes.push(this._world?.scene2);
// this._world?.scene3 && this.availableScenes.push(this._world?.scene3);

// No more camera movements triggered by the mouse | Using Orbit control
// this.setWheelEventListener();
// this.setMouseMoveEventListener();
Expand All @@ -82,12 +87,7 @@ export default class WorldManager extends ExperienceBasedBlueprint {
}

construct() {
if (this._experience.app?.camera.instance instanceof PerspectiveCamera)
this.cameraCurvePath.getPointAt(
0,
this._experience.app?.camera.instance.position
);

const currentCamera = this._camera?.cameras[0];
const secondaryCamera = this._camera?.cameras[1];

if (
Expand All @@ -96,6 +96,9 @@ export default class WorldManager extends ExperienceBasedBlueprint {
this._world?.scene1.pcScreenWebglTexture &&
secondaryCamera
) {
if (currentCamera instanceof PerspectiveCamera)
this.cameraCurvePath.getPointAt(0, currentCamera.position);

this._renderer?.addPortalAssets(this._world?.scene1 + "_pc_screen", {
mesh: this._world?.scene1.pcScreen,
meshCamera: secondaryCamera,
Expand Down Expand Up @@ -138,9 +141,7 @@ export default class WorldManager extends ExperienceBasedBlueprint {
0.85
)
);

this._camera?.setCameraLookAt(PC_SCREEN_POSITION);

// ==============

secondaryCamera?.position.copy(
Expand Down Expand Up @@ -328,15 +329,25 @@ export default class WorldManager extends ExperienceBasedBlueprint {
}

public nextScene() {
const nextSceneIndex =
this.currentSceneIndex + 1 > this.availableScenes.length - 1
? 0
: this.currentSceneIndex + 1;

this._camera?.switchCamera(nextSceneIndex > 0 ? 1 : 0);
this._camera?.setCameraLookAt(
this._world?.scene2?.modelScene?.position.clone() ?? new Vector3()
nextSceneIndex > 0
? this.availableScenes[nextSceneIndex]?.modelScene?.position.clone() ??
new Vector3()
: (this._world?.scene1?.pcScreen?.position ?? new Vector3()).clone()
);
this._camera?.switchCamera(1);
this._renderer?.removePortalAssets(this._world?.scene1 + "_pc_screen");
this.currentSceneIndex = nextSceneIndex;
}

public prevScene() {}

public setScene(sceneIndex: number) {}

update() {
if (this.autoCameraAnimation && !this.isGsapAnimating) {
this.cameraCurvePathProgress.current = GSAP.utils.interpolate(
Expand Down
2 changes: 0 additions & 2 deletions src/experiences/pages/Home/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,6 @@ export class HomeExperience extends ExperienceBlueprint {

public construct() {
try {
if (this.world?.currentSceneIndex !== undefined) this.destruct();

this.renderer?.construct();
this.ui?.construct();
this.loader?.on(LOADED, () => {
Expand Down

0 comments on commit 7692c2f

Please sign in to comment.