pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nds): intro animation

Browse Source
This commit is contained in:
Stevan
2026-01-07 22:17:37 +01:00
parent b2c7dc5131
commit ec9f8cc264
3 changed files with 201 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
app/components/NDS.vue
View File

@@ -1,6 +1,22 @@
<script setup lang="ts">
import { useLoop, useTresContext } from "@tresjs/core";
import * as THREE from "three";
import gsap from "gsap";
const INTRO_ANIMATION = {
MODEL_SPIN_DURATION: 3,
LID_OPEN_DURATION: 2,
LID_OPEN_OVERLAP: 1.5,
CAMERA_START_POSITION: new THREE.Vector3(0, 15, 2.6),
CAMERA_START_ROTATION: new THREE.Euler(THREE.MathUtils.degToRad(-90), 0, 0),
CAMERA_END_POSITION: new THREE.Vector3(0, 14, 10),
CAMERA_END_ROTATION: new THREE.Euler(THREE.MathUtils.degToRad(-55), 0, 0),
CAMERA_DURATION: 3,
LID_CLOSED_ROTATION: THREE.MathUtils.degToRad(120),
LID_OPENED_ROTATION: THREE.MathUtils.degToRad(-30),
};
const props = defineProps<{
topScreenCanvas: HTMLCanvasElement | null;
@@ -8,6 +24,7 @@ const props = defineProps<{
}>();
const { assets } = useAssets();
const app = useAppStore();
const model = assets.nintendoDs.scene.clone(true);
@@ -18,6 +35,7 @@ let bottomScreenTexture: THREE.CanvasTexture | null = null;
// screens
const TOP_SCREEN = "Object_9";
const BOTTOM_SCREEN = "Object_28";
const LID = "Object_8";
// buttons
const CROSS_BUTTON = "Object_21";
@@ -41,11 +59,20 @@ const { camera, renderer } = useTresContext();
model.scale.set(100, 100, 100);
const app = useAppStore();
watch(
() => camera.activeCamera.value,
(cam) => {
if (cam) app.setCamera(cam);
if (cam) {
app.setCamera(cam);
if (app.booted) {
cam.position.copy(INTRO_ANIMATION.CAMERA_END_POSITION);
cam.rotation.copy(INTRO_ANIMATION.CAMERA_END_ROTATION);
} else {
cam.position.copy(INTRO_ANIMATION.CAMERA_START_POSITION);
cam.rotation.copy(INTRO_ANIMATION.CAMERA_START_ROTATION);
}
}
},
{ immediate: true },
);
@@ -57,6 +84,80 @@ model.traverse((child) => {
}
});
const lidMesh = requireMesh(LID);
const topScreenMesh = requireMesh(TOP_SCREEN);
if (app.booted) {
lidMesh.rotation.x = INTRO_ANIMATION.LID_OPENED_ROTATION;
topScreenMesh.rotation.x = INTRO_ANIMATION.LID_OPENED_ROTATION;
} else {
lidMesh.rotation.x = INTRO_ANIMATION.LID_CLOSED_ROTATION;
topScreenMesh.rotation.x = INTRO_ANIMATION.LID_CLOSED_ROTATION;
}
const hasAnimated = ref(app.booted);
const animateIntro = () => {
if (hasAnimated.value) return;
hasAnimated.value = true;
const introTimeline = gsap.timeline();
introTimeline.to(
camera.activeCamera.value.position,
{
x: INTRO_ANIMATION.CAMERA_END_POSITION.x,
y: INTRO_ANIMATION.CAMERA_END_POSITION.y,
z: INTRO_ANIMATION.CAMERA_END_POSITION.z,
duration: INTRO_ANIMATION.CAMERA_DURATION,
ease: "power2.inOut",
},
0,
);
introTimeline.to(
camera.activeCamera.value.rotation,
{
x: INTRO_ANIMATION.CAMERA_END_ROTATION.x,
y: INTRO_ANIMATION.CAMERA_END_ROTATION.y,
z: INTRO_ANIMATION.CAMERA_END_ROTATION.z,
duration: INTRO_ANIMATION.CAMERA_DURATION,
ease: "power2.inOut",
},
0,
);
introTimeline.to(
model.rotation,
{
y: Math.PI * 2,
duration: INTRO_ANIMATION.MODEL_SPIN_DURATION,
ease: "power2.inOut",
},
0,
);
introTimeline.to(
lidMesh.rotation,
{
x: INTRO_ANIMATION.LID_OPENED_ROTATION,
duration: INTRO_ANIMATION.LID_OPEN_DURATION,
ease: "power2.out",
},
INTRO_ANIMATION.MODEL_SPIN_DURATION - INTRO_ANIMATION.LID_OPEN_OVERLAP,
);
introTimeline.to(
topScreenMesh.rotation,
{
x: INTRO_ANIMATION.LID_OPENED_ROTATION,
duration: INTRO_ANIMATION.LID_OPEN_DURATION,
ease: "power2.out",
},
"<",
);
};
watch(
() => [props.topScreenCanvas, props.bottomScreenCanvas],
() => {
@@ -189,6 +290,11 @@ const pressButton = (button: string) => {
};
const handleClick = (event: MouseEvent) => {
if (!hasAnimated.value) {
animateIntro();
return;
}
const domElement = renderer.instance.domElement;
const rect = domElement.getBoundingClientRect();

7
app/pages/index.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import * as THREE from "three";
import type { Screen as NDSScreen } from "#components";
const ENABLE_3D = true;
@@ -56,11 +55,7 @@ useKeyUp((key) => {
<LoadingScreen v-if="!isReady" />
<div v-else>
<TresCanvas v-if="ENABLE_3D" window-size clear-color="#181818">
<TresPerspectiveCamera
:args="[45, 1, 0.001, 1000]"
:position="[0, 10, 12]"
:rotation="[THREE.MathUtils.degToRad(-38.3), 0, 0]"
/>
<TresPerspectiveCamera :args="[45, 1, 0.001, 1000]" />
<TresAmbientLight />
<TresDirectionalLight />

169
app/stores/gallery.ts
View File

@@ -1,6 +1,19 @@
import gsap from "gsap";
import * as THREE from "three";
const ANIMATION = {
NDS_CAMERA_POSITION: new THREE.Vector3(0, 14, 10),
NDS_CAMERA_ROTATION: new THREE.Euler(THREE.MathUtils.degToRad(-55), 0, 0),
GALLERY_CAMERA_POSITION: new THREE.Vector3(0, 4.5, -3),
GALLERY_CAMERA_ROTATION: new THREE.Euler(THREE.MathUtils.degToRad(-62), 0, 0),
CAMERA_DURATION: 3,
CAMERA_ROTATION_OVERLAP: 0.1,
FADE_DURATION: 1,
FADE_CAMERA_OVERLAP: 0.9,
NAVIGATE_DELAY: 3150,
};
export const useGalleryStore = defineStore("gallery", {
state: () => ({
intro: {
@@ -18,93 +31,40 @@ export const useGalleryStore = defineStore("gallery", {
actions: {
animateIntro() {
const CAMERA_DELAY = 0.7;
const CAMERA_DURATION = 3;
const FADE_DELAY = 0;
const FADE_DURATION = 1;
this.isIntro = true;
this.isOutro = false;
const app = useAppStore();
if (app.camera) {
gsap.fromTo(
app.camera.position,
{
x: 0,
y: 10,
z: 12,
},
{
x: 0,
y: 3,
z: -1.7,
duration: CAMERA_DURATION,
delay: CAMERA_DELAY,
ease: "power2.inOut",
},
);
gsap.fromTo(
app.camera.rotation,
{
x: THREE.MathUtils.degToRad(-38.3),
y: 0,
z: 0,
},
{
x: THREE.MathUtils.degToRad(-25),
y: 0,
z: 0,
duration: CAMERA_DURATION * 0.9,
delay: CAMERA_DELAY,
ease: "power2.inOut",
},
);
}
// Intro: Fade starts first (at 0), camera starts after with overlap
const cameraDelay =
ANIMATION.FADE_DURATION - ANIMATION.FADE_CAMERA_OVERLAP;
gsap.fromTo(
this.intro,
{ fadeOpacity: 0 },
{
fadeOpacity: 1,
duration: FADE_DURATION,
delay: FADE_DELAY,
duration: ANIMATION.FADE_DURATION,
delay: 0,
ease: "none",
},
);
setTimeout(() => {
navigateTo("/gallery");
}, 3150);
},
animateOutro() {
const CAMERA_DELAY = 0;
const CAMERA_DURATION = 3;
const FADE_DELAY = 2.3;
const FADE_DURATION = 1;
this.isIntro = false;
this.isOutro = true;
const app = useAppStore();
if (app.camera) {
gsap.fromTo(
app.camera.position,
{
x: 0,
y: 3,
z: -1.7,
x: ANIMATION.NDS_CAMERA_POSITION.x,
y: ANIMATION.NDS_CAMERA_POSITION.y,
z: ANIMATION.NDS_CAMERA_POSITION.z,
},
{
x: 0,
y: 10,
z: 12,
duration: CAMERA_DURATION,
delay: CAMERA_DELAY,
x: ANIMATION.GALLERY_CAMERA_POSITION.x,
y: ANIMATION.GALLERY_CAMERA_POSITION.y,
z: ANIMATION.GALLERY_CAMERA_POSITION.z,
duration: ANIMATION.CAMERA_DURATION,
delay: cameraDelay,
ease: "power2.inOut",
},
);
@@ -112,16 +72,71 @@ export const useGalleryStore = defineStore("gallery", {
gsap.fromTo(
app.camera.rotation,
{
x: THREE.MathUtils.degToRad(-25),
y: 0,
z: 0,
x: ANIMATION.NDS_CAMERA_ROTATION.x,
y: ANIMATION.NDS_CAMERA_ROTATION.y,
z: ANIMATION.NDS_CAMERA_ROTATION.z,
},
{
x: THREE.MathUtils.degToRad(-38.3),
y: 0,
z: 0,
duration: CAMERA_DURATION * 0.9,
delay: CAMERA_DELAY,
x: ANIMATION.GALLERY_CAMERA_ROTATION.x,
y: ANIMATION.GALLERY_CAMERA_ROTATION.y,
z: ANIMATION.GALLERY_CAMERA_ROTATION.z,
duration:
ANIMATION.CAMERA_DURATION *
(1 - ANIMATION.CAMERA_ROTATION_OVERLAP),
delay: cameraDelay,
ease: "power2.inOut",
},
);
}
setTimeout(() => {
navigateTo("/gallery");
}, ANIMATION.NAVIGATE_DELAY);
},
animateOutro() {
this.isIntro = false;
this.isOutro = true;
const app = useAppStore();
// Outro: Camera starts first (at 0), fade starts after with overlap
const fadeDelay =
ANIMATION.CAMERA_DURATION - ANIMATION.FADE_CAMERA_OVERLAP;
if (app.camera) {
gsap.fromTo(
app.camera.position,
{
x: ANIMATION.GALLERY_CAMERA_POSITION.x,
y: ANIMATION.GALLERY_CAMERA_POSITION.y,
z: ANIMATION.GALLERY_CAMERA_POSITION.z,
},
{
x: ANIMATION.NDS_CAMERA_POSITION.x,
y: ANIMATION.NDS_CAMERA_POSITION.y,
z: ANIMATION.NDS_CAMERA_POSITION.z,
duration: ANIMATION.CAMERA_DURATION,
delay: 0,
ease: "power2.inOut",
},
);
gsap.fromTo(
app.camera.rotation,
{
x: ANIMATION.GALLERY_CAMERA_ROTATION.x,
y: ANIMATION.GALLERY_CAMERA_ROTATION.y,
z: ANIMATION.GALLERY_CAMERA_ROTATION.z,
},
{
x: ANIMATION.NDS_CAMERA_ROTATION.x,
y: ANIMATION.NDS_CAMERA_ROTATION.y,
z: ANIMATION.NDS_CAMERA_ROTATION.z,
duration:
ANIMATION.CAMERA_DURATION *
(1 - ANIMATION.CAMERA_ROTATION_OVERLAP),
delay: 0,
ease: "power2.inOut",
},
);
@@ -132,8 +147,8 @@ export const useGalleryStore = defineStore("gallery", {
{ fadeOpacity: 1 },
{
fadeOpacity: 0,
duration: FADE_DURATION,
delay: FADE_DELAY,
duration: ANIMATION.FADE_DURATION,
delay: fadeDelay,
ease: "none",
},
);
@@ -141,7 +156,7 @@ export const useGalleryStore = defineStore("gallery", {
setTimeout(() => {
this.isOutro = false;
app.navigateTo("home");
}, 3310);
}, ANIMATION.NAVIGATE_DELAY);
},
},
});