From e7efd8bddf7adc6ef67239b29604761dcc0ba5c6 Mon Sep 17 00:00:00 2001 From: MNAth_ Date: Sat, 20 Jan 2024 23:30:02 +0300 Subject: [PATCH] refactor: improve interactions --- nuxt.config.ts | 8 +- .../experiences/scene-component.blueprint.ts | 6 +- src/common/experiences/interaction.model.ts | 1 + src/common/experiences/navigation.model.ts | 1 + src/config/common.config.ts | 53 +++++- src/experiences/home/interactions.ts | 45 +++-- src/experiences/home/navigation.ts | 44 ++++- src/experiences/home/router.ts | 9 +- src/experiences/home/world/manager.ts | 37 +++- .../home/world/scene-1.component.ts | 26 +++ .../home/world/scene-2.component.ts | 16 +- .../home/world/scene-3.component.ts | 171 +++++++++--------- 12 files changed, 288 insertions(+), 129 deletions(-) diff --git a/nuxt.config.ts b/nuxt.config.ts index f28cc17..faac200 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -37,7 +37,13 @@ export default defineNuxtConfig({ srcDir: "./src", runtimeConfig: { public: { - env: process.env.MODE, + MODE: process.env.MODE, + GITHUB_LINK: process.env.GITHUB_LINK, + LINKEDIN_LINK: process.env.LINKEDIN_LINK, + DISCORD_LINK: process.env.DISCORD_LINK, + STACKOVERFLOW_LINK: process.env.STACKOVERFLOW_LINK, + TWITTER_LINK: process.env.TWITTER_LINK, + TELEGRAM_LINK: process.env.TELEGRAM_LINK, }, }, vite: { diff --git a/src/blueprints/experiences/scene-component.blueprint.ts b/src/blueprints/experiences/scene-component.blueprint.ts index 2ef10c5..4e1079b 100644 --- a/src/blueprints/experiences/scene-component.blueprint.ts +++ b/src/blueprints/experiences/scene-component.blueprint.ts @@ -35,6 +35,7 @@ import type { NavigationView } from "~/common/experiences/navigation.model"; // CONFIG import { Config } from "~/config"; +import type { SelectableObject } from "~/common/experiences/interaction.model"; // TODO: Link with the names of assets in the `app.loader` assets names export interface SceneBlueprintProps { @@ -65,10 +66,11 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint { spherical: Exclude["limits"]; target: Exclude["limits"]; } = undefined; + public cameraPath = new CatmullRomCurve3(); public center = new Vector3(); - public timeline?: gsap.core.Timeline; + public selectableObjects: SelectableObject[] = []; constructor(_: SceneBlueprintProps) { super(); @@ -167,5 +169,7 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint { return this.timeline; } + public initSelectableObjects(): void {} + public update(): void {} } diff --git a/src/common/experiences/interaction.model.ts b/src/common/experiences/interaction.model.ts index 6b25da0..e3ec006 100644 --- a/src/common/experiences/interaction.model.ts +++ b/src/common/experiences/interaction.model.ts @@ -3,6 +3,7 @@ import type { Object3D, Object3DEventMap, Vector3 } from "three"; export interface SelectableObject { object: Object3D; link?: string; + externalLink?: string; focusPoint?: Vector3; focusTarget?: Vector3; focusFov?: number; diff --git a/src/common/experiences/navigation.model.ts b/src/common/experiences/navigation.model.ts index 4ef295a..600c703 100644 --- a/src/common/experiences/navigation.model.ts +++ b/src/common/experiences/navigation.model.ts @@ -54,6 +54,7 @@ export interface NavigationView { onTouchMove?: (event: TouchEvent) => unknown; onContextMenu?: (event: MouseEvent) => unknown; onWheel?: (event: Event) => unknown; + onLeave?: (event: Event) => unknown; } export interface ViewLimits { diff --git a/src/config/common.config.ts b/src/config/common.config.ts index a1c2afa..c9a8fd9 100644 --- a/src/config/common.config.ts +++ b/src/config/common.config.ts @@ -5,23 +5,68 @@ export abstract class CommonConfig { "M0,0 C0.001,0.001 0.002,0.003 0.003,0.004 0.142,0.482 0.284,0.75 0.338,0.836 0.388,0.924 0.504,1 1,1"; static readonly DEBUG = (() => { try { - return useRuntimeConfig().public.env === "development"; - } catch (_) { + return useRuntimeConfig().public.MODE === "development"; + } catch { return false; } })(); static readonly FIXED_WINDOW_HEIGHT = (() => { try { return window.outerHeight; - } catch (_) { + } catch { return 0; } })(); static readonly FIXED_WINDOW_WIDTH = (() => { try { return window.outerWidth; - } catch (_) { + } catch { return 0; } })(); + + static readonly GITHUB_LINK: string = (() => { + try { + return useRuntimeConfig().public.GITHUB_LINK; + } catch { + return "https://google.com"; + } + })(); + static readonly LINKEDIN_LINK: string = (() => { + try { + return useRuntimeConfig().public.LINKEDIN_LINK; + } catch { + return "https://google.com"; + } + })(); + static readonly DISCORD_LINK: string = (() => { + try { + return useRuntimeConfig().public.DISCORD_LINK; + } catch { + return "https://google.com"; + } + })(); + static readonly STACKOVERFLOW_LINK: string = (() => { + try { + return useRuntimeConfig().public.STACKOVERFLOW_LINK; + } catch { + return "https://google.com"; + } + })(); + + static readonly TWITTER_LINK: string = (() => { + try { + return useRuntimeConfig().public.TWITTER_LINK; + } catch { + return "https://google.com"; + } + })(); + + static readonly TELEGRAM_LINK: string = (() => { + try { + return useRuntimeConfig().public.TELEGRAM_LINK; + } catch { + return "https://google.com"; + } + })(); } diff --git a/src/experiences/home/interactions.ts b/src/experiences/home/interactions.ts index ab22563..d2a97c5 100644 --- a/src/experiences/home/interactions.ts +++ b/src/experiences/home/interactions.ts @@ -4,6 +4,7 @@ import { Vector2, type Object3DEventMap, Vector3, + Color, } from "three"; import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass"; import { gsap } from "gsap"; @@ -23,11 +24,13 @@ export class Interactions extends ExperienceBasedBlueprint { protected _experience = new HomeExperience(); private readonly mouseCoordinate = new Vector2(); - private readonly outlineDefault = { - strength: 12, + private readonly _outlineDefault = { + strength: 2, glow: 1, - thickness: 2.5, + thickness: 2, pulse: 4.5, + visibleColor: "#fff", + hiddenColor: "#fff", }; private _appScene = this._experience.app.scene; @@ -92,9 +95,9 @@ export class Interactions extends ExperienceBasedBlueprint { selectables: SelectableObject[], intersectable: Object3D = this._appScene ) { - if (!this._camera?.instance || this.outlinePass || !selectables.length) + if (!this._camera?.instance || this.outlinePass) throw new Error("Wrong params"); - + if (!selectables.length) return; if (this.timeline.isActive()) this.timeline.progress(1); this.enabled = true; @@ -118,6 +121,12 @@ export class Interactions extends ExperienceBasedBlueprint { this._camera.instance, selectableObjects ); + this.outlinePass.visibleEdgeColor = new Color( + this._outlineDefault.visibleColor + ); + this.outlinePass.hiddenEdgeColor = new Color( + this._outlineDefault.hiddenColor + ); this.timeline .fromTo( @@ -126,7 +135,7 @@ export class Interactions extends ExperienceBasedBlueprint { edgeStrength: 0, }, { - edgeStrength: this.outlineDefault.strength + 4, + edgeStrength: this._outlineDefault.strength + 2, repeat: 1, repeatDelay: 1, yoyo: true, @@ -136,10 +145,10 @@ export class Interactions extends ExperienceBasedBlueprint { if (!this.outlinePass) return; this.outlinePass.selectedObjects = []; - this.outlinePass.edgeStrength = this.outlineDefault.strength; - this.outlinePass.edgeGlow = this.outlineDefault.glow; - this.outlinePass.edgeThickness = this.outlineDefault.thickness; - this.outlinePass.pulsePeriod = this.outlineDefault.pulse; + this.outlinePass.edgeStrength = this._outlineDefault.strength; + this.outlinePass.edgeGlow = this._outlineDefault.glow; + this.outlinePass.edgeThickness = this._outlineDefault.thickness; + this.outlinePass.pulsePeriod = this._outlineDefault.pulse; }); this._composer?.addPass(`${Interactions.name}_pass`, this.outlinePass); @@ -166,7 +175,7 @@ export class Interactions extends ExperienceBasedBlueprint { if (this.outlinePass) { this.outlinePass.selectedObjects = []; - this.outlinePass.edgeStrength = this.outlineDefault.strength; + this.outlinePass.edgeStrength = this._outlineDefault.strength; } if (this._ui?.targetElement) @@ -189,17 +198,18 @@ export class Interactions extends ExperienceBasedBlueprint { !e.isPrimary || !this.controls || !this.outlinePass?.selectedObjects.length || - !this._camera?.instance + !this._camera?.instance || + !this._selectedObject?.uuid ) return; - const currentObject = - this._selectableObjects?.[this._selectedObject?.uuid ?? ""]; + const router = useRouter(); + const currentObject = this._selectableObjects?.[this._selectedObject.uuid]; if ( currentObject?.focusPoint && currentObject.focusTarget && - !currentObject.link + !(currentObject.link || currentObject?.externalLink) ) { const duration = Config.GSAP_ANIMATION_DURATION - 0.5; this._lastCameraPosition = this._camera.instance.position.clone(); @@ -224,7 +234,10 @@ export class Interactions extends ExperienceBasedBlueprint { }); } - if (currentObject?.link) return window.open(currentObject.link, "_blank"); + if (currentObject?.link) return router?.push(currentObject.link); + + if (currentObject?.externalLink) + return window.open(currentObject.externalLink, "_blank"); }; public construct() { diff --git a/src/experiences/home/navigation.ts b/src/experiences/home/navigation.ts index 9d63c8f..1de57bb 100644 --- a/src/experiences/home/navigation.ts +++ b/src/experiences/home/navigation.ts @@ -173,7 +173,8 @@ export class Navigation extends ExperienceBasedBlueprint { !this._view.drag || !this._view.down || !this._view.onMouseUp || - !this._view.onMouseMove + !this._view.onMouseMove || + this._experience.cameraAnimation?.enabled ) return; @@ -191,7 +192,7 @@ export class Navigation extends ExperienceBasedBlueprint { this._view?.down(_event.clientX, _event.clientY); - this._ui?.targetElementParent?.addEventListener<"mouseup">( + this._ui?.targetElementParent?.addEventListener( "mouseup", this._view.onMouseUp ); @@ -200,12 +201,14 @@ export class Navigation extends ExperienceBasedBlueprint { this._view.onMouseMove ); }; + this._view.onMouseMove = (_event) => { _event.preventDefault(); if (!this._view.move) return; this._view.move(_event.clientX, _event.clientY); }; + this._view.onMouseUp = (_event) => { _event.preventDefault(); @@ -223,13 +226,15 @@ export class Navigation extends ExperienceBasedBlueprint { this._view.onMouseMove ); }; + this._view.onTouchStart = (_event) => { _event.preventDefault(); if ( !this._view.down || !this._view.onTouchEnd || - !this._view.onTouchMove + !this._view.onTouchMove || + this._experience.cameraAnimation?.enabled ) return; @@ -245,6 +250,7 @@ export class Navigation extends ExperienceBasedBlueprint { this._view.onTouchMove ); }; + this._view.onTouchMove = (_event) => { _event.preventDefault(); @@ -269,9 +275,11 @@ export class Navigation extends ExperienceBasedBlueprint { this._view.onTouchMove ); }; + this._view.onContextMenu = (_event) => { _event.preventDefault(); }; + this._view.onWheel = (_event) => { _event.preventDefault(); @@ -287,6 +295,14 @@ export class Navigation extends ExperienceBasedBlueprint { this._view.zooming(normalized.pixelY); }; + this._view.onLeave = (_event) => { + if (this._view.onMouseMove) + this._ui?.targetElement?.removeEventListener( + "mousemove", + this._view.onMouseMove + ); + }; + this._ui?.targetElementParent?.addEventListener( "mousedown", this._view.onMouseDown @@ -302,15 +318,21 @@ export class Navigation extends ExperienceBasedBlueprint { this._ui?.targetElementParent?.addEventListener( "mousewheel", this._view.onWheel, - { - passive: false, - } + { passive: false } ); this._ui?.targetElementParent?.addEventListener( "wheel", this._view.onWheel, { passive: false } ); + this._ui?.targetElementParent?.addEventListener( + "mouseleave", + this._view.onLeave + ); + this._ui?.targetElementParent?.addEventListener( + "mouseenter", + this._view.onLeave + ); })(); this._appSizes.on("resize", () => this._setConfig()); @@ -362,6 +384,16 @@ export class Navigation extends ExperienceBasedBlueprint { "wheel", this._view.onWheel ); + this._view.onLeave && + this._ui?.targetElementParent?.removeEventListener( + "mouseleave", + this._view.onLeave + ); + this._view.onLeave && + this._ui?.targetElementParent?.removeEventListener( + "mouseenter", + this._view.onLeave + ); this._appSizes.off("resize", () => this._setConfig()); } diff --git a/src/experiences/home/router.ts b/src/experiences/home/router.ts index fce8b62..c480c4d 100644 --- a/src/experiences/home/router.ts +++ b/src/experiences/home/router.ts @@ -10,10 +10,11 @@ import { ExperienceBasedBlueprint } from "~/blueprints/experiences/experience-ba export class Router extends ExperienceBasedBlueprint { protected _experience = new HomeExperience(); - protected _router = useRouter(); - protected _route = useRoute(); - protected _availableRoutes: { [routeName: string]: RouteRecordRaw } = {}; - protected _currentRouteName?: string; + + private _router = useRouter(); + private _route = useRoute(); + private _availableRoutes: { [routeName: string]: RouteRecordRaw } = {}; + private _currentRouteName?: string; constructor() { super(); diff --git a/src/experiences/home/world/manager.ts b/src/experiences/home/world/manager.ts index b1d439b..9785b61 100644 --- a/src/experiences/home/world/manager.ts +++ b/src/experiences/home/world/manager.ts @@ -28,6 +28,7 @@ export class WorldManager extends ExperienceBasedBlueprint { private readonly _cameraAnimation = this._experience.cameraAnimation; private readonly _navigation = this._experience.navigation; private readonly _composer = this._experience.composer; + private readonly _interactions = this._experience.interactions; private readonly _transitionEffectDefault = { duration: 0.3, ease: Power0.easeIn, @@ -36,6 +37,9 @@ export class WorldManager extends ExperienceBasedBlueprint { private _world: typeof this._experience.world; private _prevSceneKey?: string; private _prevProjectedSceneKey?: string; + private _onRouterChange?: () => unknown; + private _onCameraAnimationStart?: () => unknown; + private _onCameraAnimationEnd?: () => unknown; public readonly timeline = gsap.timeline({ onStart: () => {}, @@ -260,7 +264,7 @@ export class WorldManager extends ExperienceBasedBlueprint { mainScene.cameraPath?.getPoint(0), mainScene.center ); - this._cameraAnimation.enabled = true + this._cameraAnimation.enabled = true; } public async construct() { @@ -284,11 +288,38 @@ export class WorldManager extends ExperienceBasedBlueprint { await this._intro(); this._setScene(); - this._router?.on(events.CHANGED, () => this._setScene()); + this._onRouterChange = () => this._setScene(); + this._onCameraAnimationStart = () => { + this._interactions?.stop(); + }; + this._onCameraAnimationEnd = () => { + if (!this._world || typeof this._router?.currentRouteKey !== "string") + return; + + const currentScene = + this._world.availablePageScenes[this._router.currentRouteKey]; + + currentScene.initSelectableObjects(); + this._interactions?.start( + currentScene.selectableObjects, + currentScene.modelScene + ); + }; + + this._router?.on(events.CHANGED, this._onRouterChange); + this._cameraAnimation?.on(events.STARTED, this._onCameraAnimationStart); + this._cameraAnimation?.on(events.ENDED, this._onCameraAnimationEnd); this.emit(events.CONSTRUCTED, this); } - public destruct() {} + public destruct() { + if (this._onRouterChange) + this._router?.off(events.CHANGED, this._onRouterChange); + if (this._onCameraAnimationStart) + this._cameraAnimation?.off(events.STARTED, this._onCameraAnimationStart); + if (this._onCameraAnimationEnd) + this._cameraAnimation?.off(events.ENDED, this._onCameraAnimationEnd); + } public update() {} } diff --git a/src/experiences/home/world/scene-1.component.ts b/src/experiences/home/world/scene-1.component.ts index 9ac6951..6bde135 100644 --- a/src/experiences/home/world/scene-1.component.ts +++ b/src/experiences/home/world/scene-1.component.ts @@ -32,6 +32,7 @@ import { Config } from "~/config"; // STATICS import { DESTRUCTED } from "~/static/event.static"; +import { pages } from "~/static"; // MODELS import type { @@ -362,6 +363,31 @@ export class Scene1Component extends SceneComponentBlueprint { }); } + public initSelectableObjects() { + const router = useRouter(); + let nextPage: string | undefined; + + for (let i = 0; i < router.getRoutes().length; i++) { + const route = router.getRoutes()[i]; + + if (route.meta.key === pages.SKILL_PAGE) { + nextPage = route.path; + break; + } + } + + this.selectableObjects = [ + ...(this.pcScreen && nextPage + ? [ + { + object: this.pcScreen, + link: nextPage, + }, + ] + : []), + ]; + } + public intro() { if (!(this?.modelScene && this.pcScreen && this.pcScreenWebglTexture)) return; diff --git a/src/experiences/home/world/scene-2.component.ts b/src/experiences/home/world/scene-2.component.ts index 64c7e62..6137c02 100644 --- a/src/experiences/home/world/scene-2.component.ts +++ b/src/experiences/home/world/scene-2.component.ts @@ -71,18 +71,14 @@ export class Scene2Component extends SceneComponentBlueprint { public intro() { if (!this.modelScene) return this.timeline; - this.modelScene.renderOrder = 1; - const _PARAMS = { alphaTest: 0 }; const _MAT_KEYS = Object.keys(this._availableMaterials); + this.modelScene.renderOrder = 1; + return this.timeline?.to(_PARAMS, { alphaTest: 1, duration: Config.GSAP_ANIMATION_DURATION, - onStart: () => { - // if (!this._navigation?.timeline.isActive()) - // this._navigation?.setLimits(this.navigationLimits); - }, onUpdate: () => { for (const key of _MAT_KEYS) this._availableMaterials[key].alphaTest = 1 - _PARAMS.alphaTest; @@ -93,18 +89,14 @@ export class Scene2Component extends SceneComponentBlueprint { public outro() { if (!this.modelScene) return this.timeline; - this.modelScene.renderOrder = 2; - const _PARAMS = { alphaTest: 0 }; const _MAT_KEYS = Object.keys(this._availableMaterials); + this.modelScene.renderOrder = 2; + return this.timeline?.to(_PARAMS, { alphaTest: 1, duration: Config.GSAP_ANIMATION_DURATION, - onStart: () => { - // if (!this._navigation?.timeline.isActive()) - // this._navigation?.setLimits(this.navigationLimits); - }, onUpdate: () => { for (const key of _MAT_KEYS) this._availableMaterials[key].alphaTest = _PARAMS.alphaTest; diff --git a/src/experiences/home/world/scene-3.component.ts b/src/experiences/home/world/scene-3.component.ts index 86c2e5d..b330ad9 100644 --- a/src/experiences/home/world/scene-3.component.ts +++ b/src/experiences/home/world/scene-3.component.ts @@ -35,7 +35,6 @@ import gamepadLedVertex from "./shaders/scene-3/gamepad_led/vertex.glsl"; export class Scene3Component extends SceneComponentBlueprint { private readonly _appTime = this._experience.app.time; private readonly _renderer = this._experience.renderer; - private readonly _interactions = this._experience.interactions; private readonly _currentDayTimestamp = getTodayTimestamp(); private _initialPcTopArticulation?: Object3D; @@ -45,7 +44,7 @@ export class Scene3Component extends SceneComponentBlueprint { public readonly timeline = gsap.timeline(); public readonly navigationLimits = { spherical: { - radius: { min: 4, max: 8 }, + radius: { min: 4, max: 7.5 }, phi: { min: 0.01, max: Math.PI * 0.5 }, theta: { min: 0, max: Math.PI * 0.5 }, enabled: true, @@ -100,7 +99,6 @@ export class Scene3Component extends SceneComponentBlueprint { pc_top_2: "scene_3", "eye-glass_glass": "glass", scene_3_floor: "scene_container", - pc_top_screen_2: "glass", phone_screen_2: "phone_screen", watch_screen: "watch_screen", gamepad_led: "gamepad_led", @@ -242,9 +240,7 @@ export class Scene3Component extends SceneComponentBlueprint { this.pcScreenMixerPlane.object3d.visible = false; this.pcScreenMixerPlane.object3d.name = "pc_screen"; - this.pcScreen.position.setY(-1.415); this.pcScreen.removeFromParent(); - this.pcTopArticulation.add(this.pcScreenMixerPlane.object3d); } @@ -255,6 +251,74 @@ export class Scene3Component extends SceneComponentBlueprint { ); } + public initSelectableObjects() { + const pcScreen = this.pcScreenMixerPlane?.object3d; + const pcScreenPosition = new Vector3(); + const pcScreenFocusPoint = new Vector3(); + pcScreen?.localToWorld(pcScreenPosition); + pcScreen?.position.add(new Vector3(0, -1.415, 0)); + pcScreen?.localToWorld(pcScreenFocusPoint); + pcScreen?.position.add(new Vector3(0, 1.415, 0)); + + this.selectableObjects = [ + ...(pcScreen !== undefined + ? [ + { + object: pcScreen, + focusPoint: pcScreenFocusPoint, + focusTarget: pcScreenPosition, + focusFov: 25, + }, + ] + : []), + ...(this.phoneScreen !== undefined + ? [ + { + object: this.phoneScreen, + focusPoint: this.phoneScreen + .localToWorld(new Vector3()) + .add(new Vector3(0.225, 1, 0.1)), + focusTarget: this.phoneScreen.localToWorld(new Vector3()), + }, + ] + : []), + ...(this.watchScreen !== undefined + ? [ + { + object: this.watchScreen, + focusPoint: this.watchScreen + .localToWorld(new Vector3()) + .add(new Vector3(-0.2, 0.7, 0.028)), + focusTarget: this.watchScreen.localToWorld(new Vector3()), + }, + ] + : []), + ...(this.githubLogo !== undefined + ? [{ object: this.githubLogo, externalLink: Config.GITHUB_LINK }] + : []), + ...(this.discordLogo !== undefined + ? [{ object: this.discordLogo, externalLink: Config.DISCORD_LINK }] + : []), + ...(this.twitterLogo !== undefined + ? [{ object: this.twitterLogo, externalLink: Config.TWITTER_LINK }] + : []), + ...(this.telegramLogo !== undefined + ? [{ object: this.telegramLogo, externalLink: Config.TELEGRAM_LINK }] + : []), + ...(this.linkedinLogo !== undefined + ? [{ object: this.linkedinLogo, externalLink: Config.LINKEDIN_LINK }] + : []), + ...(this.stackoverflowLogo !== undefined + ? [ + { + object: this.stackoverflowLogo, + externalLink: Config.STACKOVERFLOW_LINK, + }, + ] + : []), + ]; + } + /** * Toggle the state of the pc between open and close * @@ -286,7 +350,6 @@ export class Scene3Component extends SceneComponentBlueprint { public construct(): void { super.construct(); - this._initPcScreenIframe(); ~(() => { @@ -325,60 +388,7 @@ export class Scene3Component extends SceneComponentBlueprint { this.pcScreenMixerPlane.object3d.visible = true; for (const key of _OTHER_MAT_KEYS) this._availableMaterials[key].visible = true; - }, "<40%") - .add(() => { - const pcScreen = this.pcScreenMixerPlane?.object3d; - const pcScreenPosition = new Vector3(); - const pcScreenFocusPoint = new Vector3(); - pcScreen?.localToWorld(pcScreenPosition); - pcScreen?.position.add(new Vector3(0, -1.415, 0)); - pcScreen?.localToWorld(pcScreenFocusPoint); - pcScreen?.position.add(new Vector3(0, 1.415, 0)); - - this._interactions?.start( - [ - ...(this.phoneScreen !== undefined - ? [ - { - object: this.phoneScreen, - }, - ] - : []), - ...(this.watchScreen !== undefined - ? [{ object: this.watchScreen }] - : []), - ...(this.githubLogo !== undefined - ? [{ object: this.githubLogo, link: "https://github.com" }] - : []), - ...(this.discordLogo !== undefined - ? [{ object: this.discordLogo }] - : []), - ...(this.twitterLogo !== undefined - ? [{ object: this.twitterLogo }] - : []), - ...(this.telegramLogo !== undefined - ? [{ object: this.telegramLogo }] - : []), - ...(this.linkedinLogo !== undefined - ? [{ object: this.linkedinLogo }] - : []), - ...(this.stackoverflowLogo !== undefined - ? [{ object: this.stackoverflowLogo }] - : []), - ...(pcScreen !== undefined - ? [ - { - object: pcScreen, - focusPoint: pcScreenFocusPoint, - focusTarget: pcScreenPosition, - focusFov: 25, - }, - ] - : []), - ], - this.modelScene - ); - }); + }, "<40%"); } public outro() { @@ -391,29 +401,26 @@ export class Scene3Component extends SceneComponentBlueprint { const _ALPHA_MAT_KEYS = _MAT_KEYS.slice(0, 3); const _OTHER_MAT_KEYS = _MAT_KEYS.slice(3); - return this.togglePcOpening(0) - ?.add( - gsap.to(_PARAMS, { - alphaTest: 1, - duration: Config.GSAP_ANIMATION_DURATION, - onStart: () => { - if (this._renderer) this._renderer.enableCssRender = false; - if (this.pcScreenMixerPlane) - this.pcScreenMixerPlane.object3d.visible = false; - for (const key of _OTHER_MAT_KEYS) - this._availableMaterials[key].visible = false; - }, - onUpdate: () => { - for (const key of _ALPHA_MAT_KEYS) - this._availableMaterials[key].alphaTest = _PARAMS.alphaTest; - }, - }), - "<" - ) - .add(() => { - this._interactions?.stop(); - }); + return this.togglePcOpening(0)?.add( + gsap.to(_PARAMS, { + alphaTest: 1, + duration: Config.GSAP_ANIMATION_DURATION, + onStart: () => { + if (this._renderer) this._renderer.enableCssRender = false; + if (this.pcScreenMixerPlane) + this.pcScreenMixerPlane.object3d.visible = false; + for (const key of _OTHER_MAT_KEYS) + this._availableMaterials[key].visible = false; + }, + onUpdate: () => { + for (const key of _ALPHA_MAT_KEYS) + this._availableMaterials[key].alphaTest = _PARAMS.alphaTest; + }, + }), + "<" + ); } + public update() { this._uTime = this._appTime.elapsed * 0.001; this._uTimestamps = this._currentDayTimestamp * 0.001 + this._uTime;