math-pixel/La-Fabrik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: organize three components by domain

Browse Source
This commit is contained in:
Tom Boullay
2026-04-30 11:35:53 +02:00
parent ab8376b03e
commit 081e87c96d
30 changed files with 465 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/three/MainFeatureZone.tsx
-65
View File
@@ -1,65 +0,0 @@
import { useState } from "react";
import { Text } from "@react-three/drei";
import { MainFeatureObject } from "@/components/three/MainFeatureObject";
import { ModelSelectorPlaceholder } from "@/components/three/ModelSelectorPlaceholder";
const ZONE_ORIGIN = [10, 0.4, -8] as const;
const ZONE_RADIUS = 4.2;
export function MainFeatureZone(): React.JSX.Element {
const [caseOpen, setCaseOpen] = useState(false);
return (
<group>
<mesh
position={[ZONE_ORIGIN[0], 0.025, ZONE_ORIGIN[2]]}
rotation={[-Math.PI / 2, 0, 0]}
>
<ringGeometry args={[ZONE_RADIUS - 0.08, ZONE_RADIUS, 96]} />
<meshBasicMaterial color="#38bdf8" transparent opacity={0.72} />
</mesh>
<mesh
position={[ZONE_ORIGIN[0], 0.02, ZONE_ORIGIN[2]]}
rotation={[-Math.PI / 2, 0, 0]}
>
<circleGeometry args={[ZONE_RADIUS, 96]} />
<meshBasicMaterial color="#0ea5e9" transparent opacity={0.12} />
</mesh>
<Text
position={[ZONE_ORIGIN[0], 3.1, ZONE_ORIGIN[2] - 1.8]}
rotation={[0, 0, 0]}
fontSize={0.55}
maxWidth={5.5}
textAlign="center"
anchorX="center"
anchorY="middle"
color="#f8fafc"
outlineWidth={0.025}
outlineColor="#0f172a"
>
Pack de Relance Feature
</Text>
<MainFeatureObject
position={[ZONE_ORIGIN[0], ZONE_ORIGIN[1], ZONE_ORIGIN[2]]}
open={caseOpen}
onToggle={() => setCaseOpen((value) => !value)}
/>
<ModelSelectorPlaceholder
label="Module A"
position={[ZONE_ORIGIN[0] - 2.2, ZONE_ORIGIN[1], ZONE_ORIGIN[2] + 2.2]}
/>
<ModelSelectorPlaceholder
label="Module B"
position={[ZONE_ORIGIN[0], ZONE_ORIGIN[1], ZONE_ORIGIN[2] + 2.6]}
/>
<ModelSelectorPlaceholder
label="Module C"
position={[ZONE_ORIGIN[0] + 2.2, ZONE_ORIGIN[1], ZONE_ORIGIN[2] + 2.2]}
/>
</group>
);
}
src/components/three/RepairCaseModel.tsx
-73
View File
@@ -1,73 +0,0 @@
import { useEffect, useMemo, useRef } from "react";
import { useGLTF } from "@react-three/drei";
import gsap from "gsap";
import * as THREE from "three";
import type { Vector3Tuple } from "@/types/three";
interface RepairCaseModelProps {
modelPath: string;
open: boolean;
position?: Vector3Tuple;
rotation?: Vector3Tuple;
scale?: number | Vector3Tuple;
}
const CASE_LID_NODE_NAME = "partiesup";
const CASE_CLOSED_ROTATION_OFFSET_Z = 0;
const CASE_OPEN_ROTATION_OFFSET_Z = THREE.MathUtils.degToRad(115);
const CASE_ANIMATION_DURATION = 0.8;
export function RepairCaseModel({
modelPath,
open,
position = [0, 0, 0],
rotation = [0, 0, 0],
scale = 1,
}: RepairCaseModelProps): React.JSX.Element {
const { scene } = useGLTF(modelPath);
const model = useMemo(() => scene.clone(true), [scene]);
const lidRef = useRef<THREE.Object3D | null>(null);
const initialOpen = useRef(open);
const openedRotationZ = useRef(0);
const parsedScale =
typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
useEffect(() => {
const lid = model.getObjectByName(CASE_LID_NODE_NAME);
lidRef.current = lid ?? null;
openedRotationZ.current = lid?.rotation.z ?? 0;
if (lid) {
lid.rotation.z =
openedRotationZ.current +
(initialOpen.current
? CASE_OPEN_ROTATION_OFFSET_Z
: CASE_CLOSED_ROTATION_OFFSET_Z);
}
}, [model]);
useEffect(() => {
const lid = lidRef.current;
if (!lid) return;
const targetRotation =
openedRotationZ.current +
(open ? CASE_OPEN_ROTATION_OFFSET_Z : CASE_CLOSED_ROTATION_OFFSET_Z);
gsap.to(lid.rotation, {
z: targetRotation,
duration: CASE_ANIMATION_DURATION,
ease: "power2.inOut",
overwrite: true,
});
return () => {
gsap.killTweensOf(lid.rotation);
};
}, [open]);
return (
<group position={position} rotation={rotation} scale={parsedScale}>
<primitive object={model} />
</group>
);
}
src/components/three/gameplay/repairGame/RepairCaseModel.tsx
+167
View File
@@ -0,0 +1,167 @@
import { useEffect, useMemo, useRef } from "react";
import { useGLTF } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import gsap from "gsap";
import * as THREE from "three";
import {
REPAIR_CASE_ANIMATION_DURATION,
REPAIR_CASE_CLOSED_ROTATION_OFFSET_DEGREES,
REPAIR_CASE_FLOAT_ACTIVATION_DISTANCE,
REPAIR_CASE_FLOAT_DOWN_SPEED,
REPAIR_CASE_FLOAT_HEIGHT,
REPAIR_CASE_FLOAT_UP_SPEED,
REPAIR_CASE_LID_NODE_NAME,
REPAIR_CASE_OPEN_ROTATION_OFFSET_DEGREES,
REPAIR_CASE_ROTATION_AMPLITUDE_DEGREES,
REPAIR_CASE_ROTATION_RESET_SPEED,
} from "@/data/repairGame/repairCaseConfig";
import type { Vector3Tuple } from "@/types/three";
interface RepairCaseModelProps {
modelPath: string;
open: boolean;
position?: Vector3Tuple;
rotation?: Vector3Tuple;
scale?: number | Vector3Tuple;
}
const CASE_CLOSED_ROTATION_OFFSET_Z = THREE.MathUtils.degToRad(
REPAIR_CASE_CLOSED_ROTATION_OFFSET_DEGREES,
);
const CASE_OPEN_ROTATION_OFFSET_Z = THREE.MathUtils.degToRad(
REPAIR_CASE_OPEN_ROTATION_OFFSET_DEGREES,
);
const ROTATION_AMPLITUDE = THREE.MathUtils.degToRad(
REPAIR_CASE_ROTATION_AMPLITUDE_DEGREES,
);
export function RepairCaseModel({
modelPath,
open,
position = [0, 0, 0],
rotation = [0, 0, 0],
scale = 1,
}: RepairCaseModelProps): React.JSX.Element {
const camera = useThree((state) => state.camera);
const { scene } = useGLTF(modelPath);
const model = useMemo(() => scene.clone(true), [scene]);
const groupRef = useRef<THREE.Group>(null);
const lidRef = useRef<THREE.Object3D | null>(null);
const worldPosition = useRef(new THREE.Vector3());
const floatHeight = useRef(0);
const animationActiveRef = useRef(false);
const phase = useRef({ x: 0, y: 0, z: 0 });
const initialOpen = useRef(open);
const openedRotationZ = useRef(0);
const parsedScale =
typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
useEffect(() => {
phase.current = {
x: Math.random() * Math.PI * 2,
y: Math.random() * Math.PI * 2,
z: Math.random() * Math.PI * 2,
};
}, []);
useEffect(() => {
const lid = model.getObjectByName(REPAIR_CASE_LID_NODE_NAME);
lidRef.current = lid ?? null;
openedRotationZ.current = lid?.rotation.z ?? 0;
if (lid) {
lid.rotation.z =
openedRotationZ.current +
(initialOpen.current
? CASE_OPEN_ROTATION_OFFSET_Z
: CASE_CLOSED_ROTATION_OFFSET_Z);
}
}, [model]);
useEffect(() => {
const lid = lidRef.current;
if (!lid) return;
const targetRotation =
openedRotationZ.current +
(open ? CASE_OPEN_ROTATION_OFFSET_Z : CASE_CLOSED_ROTATION_OFFSET_Z);
gsap.to(lid.rotation, {
z: targetRotation,
duration: REPAIR_CASE_ANIMATION_DURATION,
ease: "power2.inOut",
overwrite: true,
});
return () => {
gsap.killTweensOf(lid.rotation);
};
}, [open]);
useFrame(({ clock }, delta) => {
const group = groupRef.current;
if (!group) return;
group.getWorldPosition(worldPosition.current);
const isNear =
worldPosition.current.distanceTo(camera.position) <=
REPAIR_CASE_FLOAT_ACTIVATION_DISTANCE;
const targetHeight = isNear ? REPAIR_CASE_FLOAT_HEIGHT : 0;
const floatSpeed = isNear
? REPAIR_CASE_FLOAT_UP_SPEED
: REPAIR_CASE_FLOAT_DOWN_SPEED;
floatHeight.current = THREE.MathUtils.damp(
floatHeight.current,
targetHeight,
floatSpeed,
delta,
);
group.position.y = position[1] + floatHeight.current;
animationActiveRef.current = isNear;
if (animationActiveRef.current) {
const time = clock.elapsedTime;
group.rotation.x =
rotation[0] +
Math.sin(time * 0.7 + phase.current.x) * ROTATION_AMPLITUDE;
group.rotation.y =
rotation[1] +
Math.sin(time * 0.55 + phase.current.y) * ROTATION_AMPLITUDE;
group.rotation.z =
rotation[2] +
Math.sin(time * 0.8 + phase.current.z) * ROTATION_AMPLITUDE;
return;
}
group.rotation.x = THREE.MathUtils.damp(
group.rotation.x,
rotation[0],
REPAIR_CASE_ROTATION_RESET_SPEED,
delta,
);
group.rotation.y = THREE.MathUtils.damp(
group.rotation.y,
rotation[1],
REPAIR_CASE_ROTATION_RESET_SPEED,
delta,
);
group.rotation.z = THREE.MathUtils.damp(
group.rotation.z,
rotation[2],
REPAIR_CASE_ROTATION_RESET_SPEED,
delta,
);
});
return (
<group
ref={groupRef}
position={position}
rotation={rotation}
scale={parsedScale}
>
<primitive object={model} />
</group>
);
}
src/components/three/MainFeatureObject.tsx → src/components/three/gameplay/repairGame/RepairCaseObject.tsx
+12 -11
View File
@@ -1,23 +1,24 @@
import { TriggerObject } from "@/components/three/TriggerObject";
import { RepairCaseModel } from "@/components/three/RepairCaseModel";
import { TriggerObject } from "@/components/three/interaction/TriggerObject";
import { RepairCaseModel } from "@/components/three/gameplay/repairGame/RepairCaseModel";
import {
REPAIR_CASE_CLOSE_SOUND_PATH,
REPAIR_CASE_MODEL_PATH,
REPAIR_CASE_OPEN_SOUND_PATH,
} from "@/data/repairGame/repairCaseConfig";
import { AudioManager } from "@/managers/AudioManager";
import type { Vector3Tuple } from "@/types/three";
interface MainFeatureObjectProps {
interface RepairCaseObjectProps {
position: Vector3Tuple;
open: boolean;
onToggle: () => void;
}
const CASE_MODEL_PATH = "/models/packderelance/model.gltf";
const CASE_OPEN_SOUND_PATH = "/sounds/effect/open-malette.mp3";
const CASE_CLOSE_SOUND_PATH = "/sounds/effect/close-malette.mp3";
export function MainFeatureObject({
export function RepairCaseObject({
position,
open,
onToggle,
}: MainFeatureObjectProps): React.JSX.Element {
}: RepairCaseObjectProps): React.JSX.Element {
return (
<TriggerObject
position={position}
@@ -25,13 +26,13 @@ export function MainFeatureObject({
label={open ? "Fermer la mallette" : "Ouvrir la mallette"}
onTrigger={() => {
AudioManager.getInstance().playSound(
open ? CASE_CLOSE_SOUND_PATH : CASE_OPEN_SOUND_PATH,
open ? REPAIR_CASE_CLOSE_SOUND_PATH : REPAIR_CASE_OPEN_SOUND_PATH,
);
onToggle();
}}
>
<RepairCaseModel
modelPath={CASE_MODEL_PATH}
modelPath={REPAIR_CASE_MODEL_PATH}
open={open}
position={[0, -0.45, 0]}
scale={1.5}
src/components/three/gameplay/repairGame/RepairGameZone.tsx
+81
View File
@@ -0,0 +1,81 @@
import { useState } from "react";
import { Text } from "@react-three/drei";
import { RepairCaseObject } from "@/components/three/gameplay/repairGame/RepairCaseObject";
import { RepairModuleSlot } from "@/components/three/gameplay/repairGame/RepairModuleSlot";
import {
REPAIR_GAME_MODULE_SLOTS,
REPAIR_GAME_ZONE_LABEL,
REPAIR_GAME_ZONE_ORIGIN,
REPAIR_GAME_ZONE_RADIUS,
} from "@/data/repairGame/repairGameConfig";
export function RepairGameZone(): React.JSX.Element {
const [caseOpen, setCaseOpen] = useState(false);
return (
<group>
<mesh
position={[
REPAIR_GAME_ZONE_ORIGIN[0],
0.025,
REPAIR_GAME_ZONE_ORIGIN[2],
]}
rotation={[-Math.PI / 2, 0, 0]}
>
<ringGeometry
args={[REPAIR_GAME_ZONE_RADIUS - 0.08, REPAIR_GAME_ZONE_RADIUS, 96]}
/>
<meshBasicMaterial color="#38bdf8" transparent opacity={0.72} />
</mesh>
<mesh
position={[
REPAIR_GAME_ZONE_ORIGIN[0],
0.02,
REPAIR_GAME_ZONE_ORIGIN[2],
]}
rotation={[-Math.PI / 2, 0, 0]}
>
<circleGeometry args={[REPAIR_GAME_ZONE_RADIUS, 96]} />
<meshBasicMaterial color="#0ea5e9" transparent opacity={0.12} />
</mesh>
<Text
position={[
REPAIR_GAME_ZONE_ORIGIN[0],
3.1,
REPAIR_GAME_ZONE_ORIGIN[2] - 1.8,
]}
rotation={[0, 0, 0]}
fontSize={0.55}
maxWidth={5.5}
textAlign="center"
anchorX="center"
anchorY="middle"
color="#f8fafc"
outlineWidth={0.025}
outlineColor="#0f172a"
>
{REPAIR_GAME_ZONE_LABEL}
</Text>
<RepairCaseObject
position={REPAIR_GAME_ZONE_ORIGIN}
open={caseOpen}
onToggle={() => setCaseOpen((value) => !value)}
/>
{REPAIR_GAME_MODULE_SLOTS.map((slot) => (
<RepairModuleSlot
key={slot.label}
label={slot.label}
position={[
REPAIR_GAME_ZONE_ORIGIN[0] + slot.offset[0],
REPAIR_GAME_ZONE_ORIGIN[1] + slot.offset[1],
REPAIR_GAME_ZONE_ORIGIN[2] + slot.offset[2],
]}
/>
))}
</group>
);
}
src/components/three/ModelSelectorPlaceholder.tsx → src/components/three/gameplay/repairGame/RepairModuleSlot.tsx
+9 -9
View File
@@ -1,21 +1,21 @@
import { Html } from "@react-three/drei";
import { useCallback, useState } from "react";
import { TriggerObject } from "@/components/three/TriggerObject";
import { ExplodableModel } from "@/components/three/ExplodableModel";
import { MAIN_FEATURE_MODEL_CATALOG } from "@/data/mainFeature/modelCatalog";
import type { ModelCatalogItem } from "@/data/mainFeature/modelCatalog";
import { TriggerObject } from "@/components/three/interaction/TriggerObject";
import { ExplodableModel } from "@/components/three/models/ExplodableModel";
import { REPAIR_GAME_MODEL_CATALOG } from "@/data/repairGame/repairGameModelCatalog";
import type { ModelCatalogItem } from "@/data/repairGame/repairGameModelCatalog";
import { useModelSelection } from "@/hooks/useModelSelection";
import type { Vector3Tuple } from "@/types/three";
interface ModelSelectorPlaceholderProps {
interface RepairModuleSlotProps {
position: Vector3Tuple;
label: string;
}
export function ModelSelectorPlaceholder({
export function RepairModuleSlot({
position,
label,
}: ModelSelectorPlaceholderProps): React.JSX.Element {
}: RepairModuleSlotProps): React.JSX.Element {
const [selectedModel, setSelectedModel] = useState<ModelCatalogItem | null>(
null,
);
@@ -24,7 +24,7 @@ export function ModelSelectorPlaceholder({
setSelectedModel(model);
setSplit(false);
}, []);
const selection = useModelSelection(MAIN_FEATURE_MODEL_CATALOG, handleSelect);
const selection = useModelSelection(REPAIR_GAME_MODEL_CATALOG, handleSelect);
const triggerLabel = selectedModel
? split
? `Réassembler ${label}`
@@ -72,7 +72,7 @@ export function ModelSelectorPlaceholder({
<span>Fleches: choisir</span>
<span>E/Enter: valider</span>
<ul>
{MAIN_FEATURE_MODEL_CATALOG.map((model, index) => (
{REPAIR_GAME_MODEL_CATALOG.map((model, index) => (
<li
key={model.path}
className={
src/components/three/index.ts
-14
View File
@@ -1,14 +0,0 @@
export { AnimatedModel, useAnimatedModel } from "./AnimatedModel";
export type { AnimatedModelConfig } from "./AnimatedModel";
export { SimpleModel } from "./SimpleModel";
export type { SimpleModelConfig } from "./SimpleModel";
export { ExplodableModel } from "./ExplodableModel";
export { MainFeatureZone } from "./MainFeatureZone";
export { MainFeatureObject } from "./MainFeatureObject";
export { ModelSelectorPlaceholder } from "./ModelSelectorPlaceholder";
export { RepairCaseModel } from "./RepairCaseModel";
export { useCharacterAnimation } from "@/hooks/useCharacterAnimation";
export type { CharacterAnimationConfig } from "@/hooks/useCharacterAnimation";
src/components/three/GrabbableObject.tsx → src/components/three/interaction/GrabbableObject.tsx
+15 -12
View File
@@ -3,7 +3,7 @@ import { useFrame, useThree } from "@react-three/fiber";
import { RigidBody } from "@react-three/rapier";
import type { RapierRigidBody } from "@react-three/rapier";
import * as THREE from "three";
import { InteractableObject } from "@/components/three/InteractableObject";
import { InteractableObject } from "@/components/three/interaction/InteractableObject";
import {
GRAB_DEFAULT_COLLIDERS,
GRAB_DEFAULT_LABEL,
@@ -39,7 +39,7 @@ interface GrabbableObjectProps {
}
// Shared params let one debug folder drive every instance.
const params = {
const grabDebugParams = {
stiffness: GRAB_STIFFNESS_DEFAULT,
throwBoost: GRAB_THROW_BOOST_DEFAULT,
holdDistance: GRAB_HOLD_DISTANCE_DEFAULT,
@@ -137,7 +137,7 @@ export function GrabbableObject({
useDebugFolder("GrabbableObject", (folder) => {
folder
.add(
params,
grabDebugParams,
"stiffness",
GRAB_STIFFNESS_MIN,
GRAB_STIFFNESS_MAX,
@@ -146,7 +146,7 @@ export function GrabbableObject({
.name("Hold stiffness");
folder
.add(
params,
grabDebugParams,
"throwBoost",
GRAB_THROW_BOOST_MIN,
GRAB_THROW_BOOST_MAX,
@@ -155,7 +155,7 @@ export function GrabbableObject({
.name("Throw boost");
folder
.add(
params,
grabDebugParams,
"holdDistance",
GRAB_HOLD_DISTANCE_MIN,
GRAB_HOLD_DISTANCE_MAX,
@@ -211,7 +211,8 @@ export function GrabbableObject({
? 0
: (fistHand.z - handHoldStartZ.current) * HAND_DEPTH_SENSITIVITY;
const holdDistance = THREE.MathUtils.clamp(
(handHoldDistance.current ?? params.holdDistance) + depthOffset,
(handHoldDistance.current ?? grabDebugParams.holdDistance) +
depthOffset,
GRAB_HOLD_DISTANCE_MIN,
GRAB_HOLD_DISTANCE_MAX,
);
@@ -221,12 +222,14 @@ export function GrabbableObject({
.addScaledVector(_handDirection, holdDistance);
} else {
camera.getWorldDirection(_holdTarget);
_holdTarget.multiplyScalar(params.holdDistance).add(camera.position);
_holdTarget
.multiplyScalar(grabDebugParams.holdDistance)
.add(camera.position);
}
_velocity
.subVectors(_holdTarget, _currentPos)
.multiplyScalar(params.stiffness);
.multiplyScalar(grabDebugParams.stiffness);
rbRef.current.setLinvel(
{ x: _velocity.x, y: _velocity.y, z: _velocity.z },
@@ -255,15 +258,15 @@ export function GrabbableObject({
isHolding.current = false;
if (
!rbRef.current ||
params.throwBoost === GRAB_THROW_BOOST_DEFAULT
grabDebugParams.throwBoost === GRAB_THROW_BOOST_DEFAULT
)
return;
const v = rbRef.current.linvel();
rbRef.current.setLinvel(
{
x: v.x * params.throwBoost,
y: v.y * params.throwBoost,
z: v.z * params.throwBoost,
x: v.x * grabDebugParams.throwBoost,
y: v.y * grabDebugParams.throwBoost,
z: v.z * grabDebugParams.throwBoost,
},
true,
);
src/components/three/InteractableObject.tsx → src/components/three/interaction/InteractableObject.tsx
View File
src/components/three/TriggerObject.tsx → src/components/three/interaction/TriggerObject.tsx
+7 -5
View File
@@ -1,7 +1,7 @@
import { useState } from "react";
import { useMemo, useState } from "react";
import { useGLTF } from "@react-three/drei";
import { RigidBody } from "@react-three/rapier";
import { InteractableObject } from "@/components/three/InteractableObject";
import { InteractableObject } from "@/components/three/interaction/InteractableObject";
import {
TRIGGER_DEFAULT_COLLIDERS,
TRIGGER_DEFAULT_LABEL,
@@ -28,7 +28,7 @@ interface TriggerObjectProps {
onTrigger?: () => void;
}
let _spawnCounter = 0;
let spawnCounter = 0;
function SpawnedModelInstance({
path,
@@ -38,7 +38,9 @@ function SpawnedModelInstance({
position: Vector3Tuple;
}): React.JSX.Element {
const { scene } = useGLTF(path);
return <primitive object={scene.clone()} position={position} />;
const model = useMemo(() => scene.clone(true), [scene]);
return <primitive object={model} position={position} />;
}
export function TriggerObject({
@@ -76,7 +78,7 @@ export function TriggerObject({
];
setSpawned((prev) => [
...prev,
{ id: ++_spawnCounter, position: spawnPos },
{ id: ++spawnCounter, position: spawnPos },
]);
}
}}
src/components/three/AnimatedModel.tsx → src/components/three/models/AnimatedModel.tsx
+26 -54
View File
@@ -1,8 +1,11 @@
/* eslint-disable react-hooks/immutability */
import { createContext, useRef, useState, useEffect, useCallback } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import type { AnimationAction } from "three";
import * as THREE from "three";
import {
AnimatedModelContext,
type AnimatedModelContextValue,
} from "@/components/three/models/useAnimatedModel";
import type { Vector3Tuple } from "@/types/three";
export interface AnimatedModelConfig {
@@ -19,22 +22,6 @@ export interface AnimatedModelConfig {
onAnimationEnd?: (animationName: string) => void;
}
export interface AnimatedModelContextValue {
play: (name: string, fade?: number) => void;
stop: (fade?: number) => void;
fadeTo: (name: string, fade?: number) => void;
currentAnimation: string;
isReady: boolean;
setSpeed: (speed: number) => void;
names: string[];
}
const AnimatedModelContext = createContext<AnimatedModelContextValue | null>(
null,
);
export { AnimatedModelContext };
interface AnimatedModelProps extends AnimatedModelConfig {
children?: React.ReactNode;
}
@@ -53,19 +40,18 @@ export function AnimatedModel({
children,
}: AnimatedModelProps): React.JSX.Element {
const groupRef = useRef<THREE.Group>(null);
void groupRef;
const { scene, animations } = useGLTF(modelPath);
const { actions, names, mixer } = useAnimations(animations, scene);
const model = useMemo(() => scene.clone(true), [scene]);
const { actions, names, mixer } = useAnimations(animations, groupRef);
const [currentAnim, setCurrentAnim] = useState(defaultAnimation);
const [isReady, setIsReady] = useState(false);
const isReady = names.length > 0;
useEffect(() => {
if (mixer) {
mixer.timeScale = speed;
}
}, [mixer, speed]);
Object.values(actions).forEach((action) => {
action?.setEffectiveTimeScale(speed);
});
}, [actions, speed]);
useEffect(() => {
const handleFinished = (e: { action: AnimationAction }) => {
@@ -123,39 +109,27 @@ export function AnimatedModel({
const setSpeed = useCallback(
(newSpeed: number) => {
if (mixer) {
mixer.timeScale = newSpeed;
}
Object.values(actions).forEach((action) => {
action?.setEffectiveTimeScale(newSpeed);
});
},
[mixer],
[actions],
);
useEffect(() => {
if (!autoPlay || names.length === 0) {
console.log("[AnimatedModel] No animation found in model");
return;
}
console.log(`[AnimatedModel] Available animations: ${names.join(", ")}`);
let defaultAction = actions[defaultAnimation as string];
if (!defaultAction && names.length > 0) {
console.log(
`[AnimatedModel] "${defaultAnimation}" not found, using: ${names[0]}`,
);
defaultAction = actions[names[0] as string];
}
if (defaultAction) {
defaultAction.play();
// eslint-disable-next-line react-hooks/set-state-in-effect
setIsReady(true);
setCurrentAnim(defaultAction.getClip().name);
onLoaded?.();
} else {
console.log("[AnimatedModel] No available animation in actions");
}
}, [actions, defaultAnimation, names, autoPlay, onLoaded]);
@@ -169,21 +143,19 @@ export function AnimatedModel({
names,
};
useEffect(() => {
scene.position.set(...position);
scene.rotation.set(
(rotation[0] * Math.PI) / 180,
(rotation[1] * Math.PI) / 180,
(rotation[2] * Math.PI) / 180,
);
const s =
typeof scale === "number" ? [scale, scale, scale] : (scale ?? [1, 1, 1]);
scene.scale.set(s[0] ?? 1, s[1] ?? 1, s[2] ?? 1);
}, [scene, position, rotation, scale]);
const parsedScale =
typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
return (
<AnimatedModelContext.Provider value={contextValue}>
<primitive object={scene} />
<group
ref={groupRef}
position={position}
rotation={rotation}
scale={parsedScale}
>
<primitive object={model} />
</group>
{children}
</AnimatedModelContext.Provider>
);
src/components/three/ExplodableModel.tsx → src/components/three/models/ExplodableModel.tsx
View File
src/components/three/SimpleModel.tsx → src/components/three/models/SimpleModel.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useMemo } from "react";
import { useGLTF } from "@react-three/drei";
import type { Vector3Tuple } from "@/types/three";
@@ -24,6 +25,7 @@ export function SimpleModel({
children,
}: SimpleModelProps): React.JSX.Element {
const { scene } = useGLTF(modelPath);
const model = useMemo(() => scene.clone(true), [scene]);
const parsedScale =
typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
@@ -32,7 +34,7 @@ export function SimpleModel({
<group position={position} rotation={rotation} scale={parsedScale}>
{children ?? (
<primitive
object={scene.clone()}
object={model}
castShadow={castShadow}
receiveShadow={receiveShadow}
/>
src/components/three/models/useAnimatedModel.ts
+23
View File
@@ -0,0 +1,23 @@
import { createContext, useContext } from "react";
export interface AnimatedModelContextValue {
play: (name: string, fade?: number) => void;
stop: (fade?: number) => void;
fadeTo: (name: string, fade?: number) => void;
currentAnimation: string;
isReady: boolean;
setSpeed: (speed: number) => void;
names: string[];
}
export const AnimatedModelContext =
createContext<AnimatedModelContextValue | null>(null);
export function useAnimatedModel(): AnimatedModelContextValue {
const context = useContext(AnimatedModelContext);
if (!context) {
throw new Error("useAnimatedModel must be used inside AnimatedModel");
}
return context;
}
src/components/three/SkyModel.tsx → src/components/three/world/SkyModel.tsx
View File
src/data/docs/docsTranslations.ts
+3 -3
View File
@@ -106,9 +106,9 @@ Ce document décrit le code réellement présent aujourd'hui dans le dépôt.
## Modèle d'interaction
- \`src/managers/InteractionManager.ts\` est la source d'état actuelle des interactions.
- \`src/components/three/InteractableObject.tsx\` gère la détection de focus par distance et raycasting.
- \`src/components/three/TriggerObject.tsx\` implémente les interactions de type trigger.
- \`src/components/three/GrabbableObject.tsx\` implémente les interactions saisir / relâcher.
- \`src/components/three/interaction/InteractableObject.tsx\` gère la détection de focus par distance et raycasting.
- \`src/components/three/interaction/TriggerObject.tsx\` implémente les interactions de type trigger.
- \`src/components/three/interaction/GrabbableObject.tsx\` implémente les interactions saisir / relâcher.
- \`src/hooks/useInteraction.ts\` expose un snapshot d'interaction à l'UI React.
- \`src/components/ui/InteractPrompt.tsx\` affiche le prompt \`E\` pour les interactions trigger.
src/data/repairGame/repairCaseConfig.ts
+15
View File
@@ -0,0 +1,15 @@
export const REPAIR_CASE_MODEL_PATH = "/models/packderelance/model.gltf";
export const REPAIR_CASE_OPEN_SOUND_PATH = "/sounds/effect/open-malette.mp3";
export const REPAIR_CASE_CLOSE_SOUND_PATH = "/sounds/effect/close-malette.mp3";
export const REPAIR_CASE_LID_NODE_NAME = "partiesup";
export const REPAIR_CASE_CLOSED_ROTATION_OFFSET_DEGREES = 0;
export const REPAIR_CASE_OPEN_ROTATION_OFFSET_DEGREES = 115;
export const REPAIR_CASE_ANIMATION_DURATION = 0.8;
export const REPAIR_CASE_FLOAT_ACTIVATION_DISTANCE = 5;
export const REPAIR_CASE_FLOAT_HEIGHT = 1;
export const REPAIR_CASE_FLOAT_UP_SPEED = 2.4;
export const REPAIR_CASE_FLOAT_DOWN_SPEED = 1.8;
export const REPAIR_CASE_ROTATION_RESET_SPEED = 3;
export const REPAIR_CASE_ROTATION_AMPLITUDE_DEGREES = 5;
src/data/repairGame/repairGameConfig.ts
+11
View File
@@ -0,0 +1,11 @@
import type { Vector3Tuple } from "@/types/three";
export const REPAIR_GAME_ZONE_ORIGIN: Vector3Tuple = [10, 0.4, -8];
export const REPAIR_GAME_ZONE_RADIUS = 4.2;
export const REPAIR_GAME_ZONE_LABEL = "Pack de Relance Feature";
export const REPAIR_GAME_MODULE_SLOTS = [
{ label: "Module A", offset: [-2.2, 0, 2.2] },
{ label: "Module B", offset: [0, 0, 2.6] },
{ label: "Module C", offset: [2.2, 0, 2.2] },
] satisfies Array<{ label: string; offset: Vector3Tuple }>;
src/data/mainFeature/modelCatalog.ts → src/data/repairGame/repairGameModelCatalog.ts
+1 -1
View File
@@ -3,7 +3,7 @@ export interface ModelCatalogItem {
path: string;
}
export const MAIN_FEATURE_MODEL_CATALOG: ModelCatalogItem[] = [
export const REPAIR_GAME_MODEL_CATALOG: ModelCatalogItem[] = [
{ name: "Electricienne", path: "/models/elecsimple/model.gltf" },
{ name: "Electricienne complete", path: "/models/elec/model.gltf" },
{ name: "Eolienne", path: "/models/eolienne/model.gltf" },
src/hooks/useCharacterAnimation.ts
+7 -7
View File
@@ -1,5 +1,4 @@
/* eslint-disable react-hooks/immutability */
import { useRef, useEffect, useState, useCallback } from "react";
import { useRef, useEffect, useState, useCallback, useMemo } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import type { AnimationAction, AnimationMixer } from "three";
import * as THREE from "three";
@@ -36,6 +35,7 @@ export function useCharacterAnimation(
const groupRef = useRef<THREE.Group | null>(null);
const { scene, animations } = useGLTF(modelPath);
const model = useMemo(() => scene.clone(true), [scene]);
const { actions, names, mixer } = useAnimations(animations, groupRef);
const [currentAnimation, setCurrentAnimation] = useState(initialAnimation);
@@ -78,11 +78,11 @@ export function useCharacterAnimation(
const setAnimationSpeed = useCallback(
(speed: number) => {
if (mixer) {
mixer.timeScale = speed;
}
Object.values(actions).forEach((action) => {
action?.setEffectiveTimeScale(speed);
});
},
[mixer],
[actions],
);
useEffect(() => {
@@ -93,7 +93,7 @@ export function useCharacterAnimation(
}, [actions, initialAnimation]);
return {
scene,
scene: model,
actions,
names,
mixer,
src/hooks/useModelSelection.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react";
import type { ModelCatalogItem } from "@/data/mainFeature/modelCatalog";
import type { ModelCatalogItem } from "@/data/repairGame/repairGameModelCatalog";
interface UseModelSelectionResult {
isOpen: boolean;
src/world/Environment.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import {
PHYSICS_SCENE_BACKGROUND_COLOR,
} from "@/data/world/environmentConfig";
import { useSceneMode } from "@/hooks/debug/useSceneMode";
import { SkyModel } from "@/components/three/SkyModel";
import { SkyModel } from "@/components/three/world/SkyModel";
export function Environment(): React.JSX.Element {
const sceneMode = useSceneMode();
src/world/debug/TestMap.tsx
+4 -4
View File
@@ -1,9 +1,9 @@
import { useRef } from "react";
import * as THREE from "three";
import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
import { GrabbableObject } from "@/components/three/GrabbableObject";
import { MainFeatureZone } from "@/components/three/MainFeatureZone";
import { TriggerObject } from "@/components/three/TriggerObject";
import { RepairGameZone } from "@/components/three/gameplay/repairGame/RepairGameZone";
import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
import { TriggerObject } from "@/components/three/interaction/TriggerObject";
import {
TEST_SCENE_FLOOR_COLLIDER_HALF_EXTENTS,
TEST_SCENE_FLOOR_POSITION,
@@ -85,7 +85,7 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
</mesh>
</TriggerObject>
<MainFeatureZone />
<RepairGameZone />
</Physics>
{/* Temporary: re-enable when Git LFS downloads are available again.