revert(ui): remove narrator video on talkie
This commit is contained in:
Tom Boullay
@@ -4,81 +4,20 @@ import { useGLTF } from "@react-three/drei";
|
||||
import * as THREE from "three";
|
||||
import { useGameStore } from "@/managers/stores/useGameStore";
|
||||
import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
|
||||
import { GAME_STEPS } from "@/data/game/gameStateConfig";
|
||||
import type { Vector3Tuple } from "@/types/three/three";
|
||||
|
||||
const TALKIE_MODEL_PATH = "/models/talkie/model.gltf";
|
||||
const TALKIE_VIDEO_PATH = "/assets/world/UI/talkie-video.mp4";
|
||||
const TALKIE_FIRST_VISIBLE_STEP = "reveal";
|
||||
const TALKIE_FIRST_VISIBLE_STEP_INDEX = GAME_STEPS.indexOf(
|
||||
TALKIE_FIRST_VISIBLE_STEP,
|
||||
);
|
||||
const TALKIE_REVEAL_STEPS = new Set([
|
||||
"reveal",
|
||||
"await-ebike-mount",
|
||||
"ebike-intro-ride",
|
||||
"ebike-breakdown",
|
||||
"completed",
|
||||
]);
|
||||
|
||||
const TALKIE_REST_Y = -1.55;
|
||||
const TALKIE_ACTIVE_Y = -0.92;
|
||||
const TALKIE_BASE_ROTATION: Vector3Tuple = [0.08, -0.52, -0.04];
|
||||
const TALKIE_FLOAT_ROTATION_AMPLITUDE = THREE.MathUtils.degToRad(2.2);
|
||||
const TALKIE_FLOAT_Y_AMPLITUDE = 0.055;
|
||||
const TALKIE_SCREEN_TEXTURE_SIZE = 512;
|
||||
|
||||
interface TalkieModelProps {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface TalkieVideoResources {
|
||||
canvas: HTMLCanvasElement;
|
||||
context: CanvasRenderingContext2D | null;
|
||||
material: THREE.MeshBasicMaterial;
|
||||
texture: THREE.CanvasTexture;
|
||||
video: HTMLVideoElement;
|
||||
}
|
||||
|
||||
function createTalkieVideoResources(): TalkieVideoResources {
|
||||
const video = document.createElement("video");
|
||||
video.src = TALKIE_VIDEO_PATH;
|
||||
video.crossOrigin = "anonymous";
|
||||
video.loop = true;
|
||||
video.muted = true;
|
||||
video.playsInline = true;
|
||||
video.preload = "auto";
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = TALKIE_SCREEN_TEXTURE_SIZE;
|
||||
canvas.height = TALKIE_SCREEN_TEXTURE_SIZE;
|
||||
const context = canvas.getContext("2d");
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
texture.flipY = false;
|
||||
texture.needsUpdate = true;
|
||||
const material = new THREE.MeshBasicMaterial({
|
||||
map: texture,
|
||||
toneMapped: false,
|
||||
});
|
||||
|
||||
return { canvas, context, material, texture, video };
|
||||
}
|
||||
|
||||
function TalkieModel({ active }: TalkieModelProps): React.JSX.Element {
|
||||
function TalkieModel(): React.JSX.Element {
|
||||
const { scene } = useGLTF(TALKIE_MODEL_PATH);
|
||||
const model = useMemo(() => scene.clone(true), [scene]);
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const screenRef = useRef<THREE.Mesh | null>(null);
|
||||
const originalScreenMaterialRef = useRef<THREE.Material | null>(null);
|
||||
const videoResourcesRef = useRef<TalkieVideoResources | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const videoResources = createTalkieVideoResources();
|
||||
videoResourcesRef.current = videoResources;
|
||||
|
||||
return () => {
|
||||
videoResources.video.pause();
|
||||
videoResources.video.removeAttribute("src");
|
||||
videoResources.video.load();
|
||||
videoResources.texture.dispose();
|
||||
videoResources.material.dispose();
|
||||
videoResourcesRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
model.traverse((child) => {
|
||||
@@ -88,119 +27,38 @@ function TalkieModel({ active }: TalkieModelProps): React.JSX.Element {
|
||||
child.frustumCulled = false;
|
||||
}
|
||||
});
|
||||
|
||||
const screen = model.getObjectByName("écran");
|
||||
if (screen instanceof THREE.Mesh) {
|
||||
screenRef.current = screen;
|
||||
originalScreenMaterialRef.current = Array.isArray(screen.material)
|
||||
? (screen.material[0] ?? null)
|
||||
: screen.material;
|
||||
}
|
||||
}, [model]);
|
||||
|
||||
useEffect(() => {
|
||||
const screen = screenRef.current;
|
||||
const originalMaterial = originalScreenMaterialRef.current;
|
||||
const videoResources = videoResourcesRef.current;
|
||||
|
||||
if (!videoResources) return;
|
||||
|
||||
if (screen) {
|
||||
screen.material = active
|
||||
? videoResources.material
|
||||
: (originalMaterial ?? videoResources.material);
|
||||
}
|
||||
|
||||
if (active) {
|
||||
void videoResources.video.play();
|
||||
return;
|
||||
}
|
||||
|
||||
videoResources.video.pause();
|
||||
}, [active]);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (!groupRef.current) return;
|
||||
|
||||
const t = clock.getElapsedTime();
|
||||
const floatY = Math.sin(t * 1.2) * TALKIE_FLOAT_Y_AMPLITUDE;
|
||||
const targetY = (active ? TALKIE_ACTIVE_Y : TALKIE_REST_Y) + floatY;
|
||||
groupRef.current.position.y = THREE.MathUtils.lerp(
|
||||
groupRef.current.position.y,
|
||||
targetY,
|
||||
0.14,
|
||||
);
|
||||
|
||||
groupRef.current.rotation.x =
|
||||
TALKIE_BASE_ROTATION[0] +
|
||||
Math.sin(t * 0.7) * TALKIE_FLOAT_ROTATION_AMPLITUDE;
|
||||
groupRef.current.rotation.y =
|
||||
TALKIE_BASE_ROTATION[1] +
|
||||
Math.sin(t * 0.55) * TALKIE_FLOAT_ROTATION_AMPLITUDE;
|
||||
groupRef.current.rotation.z =
|
||||
TALKIE_BASE_ROTATION[2] +
|
||||
Math.sin(t * 0.8) * TALKIE_FLOAT_ROTATION_AMPLITUDE;
|
||||
|
||||
const videoResources = videoResourcesRef.current;
|
||||
|
||||
if (active && videoResources?.context) {
|
||||
const { canvas, context, texture, video } = videoResources;
|
||||
context.fillStyle = "#02040a";
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
|
||||
const videoAspect = video.videoWidth / video.videoHeight;
|
||||
const canvasAspect = canvas.width / canvas.height;
|
||||
const drawWidth =
|
||||
videoAspect > canvasAspect
|
||||
? canvas.width
|
||||
: canvas.height * videoAspect;
|
||||
const drawHeight =
|
||||
videoAspect > canvasAspect
|
||||
? canvas.width / videoAspect
|
||||
: canvas.height;
|
||||
const drawX = (canvas.width - drawWidth) / 2;
|
||||
const drawY = (canvas.height - drawHeight) / 2;
|
||||
|
||||
context.drawImage(video, drawX, drawY, drawWidth, drawHeight);
|
||||
}
|
||||
|
||||
texture.needsUpdate = true;
|
||||
}
|
||||
groupRef.current.rotation.z = Math.sin(t * 22) * 0.025;
|
||||
groupRef.current.position.y = Math.sin(t * 6) * 0.012;
|
||||
});
|
||||
|
||||
return (
|
||||
<group
|
||||
ref={groupRef}
|
||||
position={[0, TALKIE_REST_Y, 0]}
|
||||
rotation={TALKIE_BASE_ROTATION}
|
||||
>
|
||||
<group ref={groupRef}>
|
||||
<primitive
|
||||
object={model}
|
||||
position={[0, -3.25, 0]}
|
||||
rotation={[0, -1, 0]}
|
||||
scale={1.5}
|
||||
position={[0, -0.18, 0]}
|
||||
rotation={[0.18, Math.PI, -0.08]}
|
||||
scale={1.45}
|
||||
/>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
interface TalkieSignalLinesProps {
|
||||
side: "left" | "right";
|
||||
}
|
||||
|
||||
function TalkieSignalLines({
|
||||
side,
|
||||
}: TalkieSignalLinesProps): React.JSX.Element {
|
||||
function TalkieSignalLines(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
className={`talkie-dialogue-overlay__signals talkie-dialogue-overlay__signals--${side}`}
|
||||
viewBox="0 0 90 120"
|
||||
className="talkie-dialogue-overlay__signals"
|
||||
viewBox="0 0 120 160"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M18 48 C30 58 30 72 18 82" />
|
||||
<path d="M34 34 C56 52 56 78 34 96" />
|
||||
<path d="M52 20 C84 46 84 84 52 110" />
|
||||
<path d="M34 20 C52 44 16 66 34 92 C48 112 22 128 30 146" />
|
||||
<path d="M68 12 C92 44 50 70 70 104 C84 130 48 142 52 154" />
|
||||
<path d="M100 8 C124 42 82 76 100 112 C112 136 74 150 78 158" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -209,23 +67,21 @@ export function TalkieDialogueOverlay(): React.JSX.Element | null {
|
||||
const activeSubtitle = useSubtitleStore((state) => state.activeSubtitle);
|
||||
const mainState = useGameStore((state) => state.mainState);
|
||||
const introStep = useGameStore((state) => state.intro.currentStep);
|
||||
const introStepIndex = GAME_STEPS.indexOf(introStep);
|
||||
const hasTalkieBeenRevealed =
|
||||
mainState !== "intro" || introStepIndex >= TALKIE_FIRST_VISIBLE_STEP_INDEX;
|
||||
const isAfterReveal =
|
||||
mainState !== "intro" || TALKIE_REVEAL_STEPS.has(introStep);
|
||||
const isNarratorDialogue = activeSubtitle?.speaker === "Narrateur";
|
||||
|
||||
if (!hasTalkieBeenRevealed) return null;
|
||||
if (!isAfterReveal || !isNarratorDialogue) return null;
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`talkie-dialogue-overlay${isNarratorDialogue ? " talkie-dialogue-overlay--active talkie-dialogue-overlay--raised" : ""}`}
|
||||
className="talkie-dialogue-overlay talkie-dialogue-overlay--raised"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{isNarratorDialogue ? <TalkieSignalLines side="left" /> : null}
|
||||
{isNarratorDialogue ? <TalkieSignalLines side="right" /> : null}
|
||||
<TalkieSignalLines />
|
||||
<div className="talkie-dialogue-overlay__model-frame">
|
||||
<Canvas
|
||||
camera={{ position: [0, 0, 4.2], zoom: 62 }}
|
||||
camera={{ position: [0, 0, 4.2], zoom: 78 }}
|
||||
dpr={[1, 1.5]}
|
||||
gl={{ alpha: true, antialias: true }}
|
||||
orthographic
|
||||
@@ -233,7 +89,7 @@ export function TalkieDialogueOverlay(): React.JSX.Element | null {
|
||||
<ambientLight intensity={2.5} />
|
||||
<directionalLight position={[2, 3, 4]} intensity={2.8} />
|
||||
<Suspense fallback={null}>
|
||||
<TalkieModel active={isNarratorDialogue} />
|
||||
<TalkieModel />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
</div>
|
||||
|
||||
+21
-27
@@ -942,9 +942,11 @@ canvas {
|
||||
.scene-loading-overlay__logo {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: clamp(207px, 32.2vw, 368px);
|
||||
max-height: min(43.7vh, 368px);
|
||||
object-fit: contain;
|
||||
width: clamp(180px, 28vw, 320px);
|
||||
max-height: min(38vh, 320px);
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.scene-loading-overlay__footer {
|
||||
@@ -1238,24 +1240,24 @@ canvas {
|
||||
/* Dialogue talkie */
|
||||
.talkie-dialogue-overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
left: clamp(12px, 2.2vw, 28px);
|
||||
bottom: clamp(24px, 7vh, 76px);
|
||||
z-index: 16;
|
||||
width: clamp(190px, 18vw, 310px);
|
||||
aspect-ratio: 1.05;
|
||||
overflow: visible;
|
||||
width: clamp(120px, 13vw, 190px);
|
||||
aspect-ratio: 1;
|
||||
pointer-events: none;
|
||||
transform: translateY(0);
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.talkie-dialogue-overlay--raised {
|
||||
transform: translateY(-8px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.talkie-dialogue-overlay__model-frame {
|
||||
position: absolute;
|
||||
inset: -18% -12% -6% -12%;
|
||||
inset: 0;
|
||||
animation: talkie-radio-shake 1s ease-in-out infinite;
|
||||
filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55));
|
||||
}
|
||||
|
||||
@@ -1266,30 +1268,22 @@ canvas {
|
||||
|
||||
.talkie-dialogue-overlay__signals {
|
||||
position: absolute;
|
||||
bottom: 38%;
|
||||
right: -26%;
|
||||
bottom: 34%;
|
||||
z-index: 2;
|
||||
width: 34%;
|
||||
height: 50%;
|
||||
width: 58%;
|
||||
height: 78%;
|
||||
overflow: visible;
|
||||
opacity: 0.72;
|
||||
opacity: 0.8;
|
||||
animation: talkie-signal-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.talkie-dialogue-overlay__signals--left {
|
||||
left: 7%;
|
||||
scale: -1 1;
|
||||
}
|
||||
|
||||
.talkie-dialogue-overlay__signals--right {
|
||||
right: 7%;
|
||||
}
|
||||
|
||||
.talkie-dialogue-overlay__signals path {
|
||||
fill: none;
|
||||
stroke: rgba(162, 210, 255, 0.92);
|
||||
stroke: rgba(235, 244, 255, 0.9);
|
||||
stroke-linecap: round;
|
||||
stroke-width: 4;
|
||||
filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.58));
|
||||
stroke-width: 5;
|
||||
filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.72));
|
||||
}
|
||||
|
||||
.talkie-dialogue-overlay__signals path:nth-child(2) {
|
||||
@@ -1299,7 +1293,7 @@ canvas {
|
||||
|
||||
.talkie-dialogue-overlay__signals path:nth-child(3) {
|
||||
animation-delay: 180ms;
|
||||
opacity: 0.45;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
@keyframes talkie-radio-shake {
|
||||
|
||||
Reference in New Issue
Block a user