feat: add main feature module selection

src/components/three/ExplodableModel.tsx

@@ -0,0 +1,105 @@
+import type { ReactNode } from "react";
+import { Component, useEffect, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
+import { ExplodedModel } from "@/utils/ExplodedModel";
+import type { Vector3Tuple } from "@/types/three";
+
+interface ModelErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface ModelErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ModelErrorBoundary extends Component<
+  ModelErrorBoundaryProps,
+  ModelErrorBoundaryState
+> {
+  constructor(props: ModelErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): ModelErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error): void {
+    console.warn("Failed to load explodable model", error);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) return this.props.fallback ?? null;
+    return this.props.children;
+  }
+}
+
+interface ExplodableModelInnerProps {
+  modelPath: string;
+  split: boolean;
+  position?: Vector3Tuple;
+  rotation?: Vector3Tuple;
+  scale?: number | Vector3Tuple;
+  splitDistance?: number;
+}
+
+export function ExplodableModel(
+  props: ExplodableModelInnerProps,
+): React.JSX.Element {
+  return (
+    <ModelErrorBoundary
+      key={props.modelPath}
+      fallback={<MissingModelFallback position={props.position} />}
+    >
+      <ExplodableModelInner {...props} />
+    </ModelErrorBoundary>
+  );
+}
+
+function ExplodableModelInner({
+  modelPath,
+  split,
+  position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+  splitDistance = 1.2,
+}: ExplodableModelInnerProps): React.JSX.Element {
+  const { scene } = useGLTF(modelPath);
+  const model = useMemo(() => scene.clone(true), [scene]);
+  const explodedModel = useMemo(
+    () => new ExplodedModel(model, { distance: splitDistance }),
+    [model, splitDistance],
+  );
+  const parsedScale =
+    typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
+
+  useEffect(() => {
+    explodedModel.setSplit(split);
+  }, [explodedModel, split]);
+
+  useFrame((_, delta) => {
+    explodedModel.update(delta);
+  });
+
+  return (
+    <group position={position} rotation={rotation} scale={parsedScale}>
+      <primitive object={model} />
+    </group>
+  );
+}
+
+function MissingModelFallback({
+  position = [0, 0, 0],
+}: {
+  position?: Vector3Tuple;
+}): React.JSX.Element {
+  return (
+    <mesh position={position}>
+      <boxGeometry args={[0.7, 0.7, 0.7]} />
+      <meshStandardMaterial color="#7f1d1d" wireframe />
+    </mesh>
+  );
+}

src/components/three/MainFeatureZone.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { Text } from "@react-three/drei";
+import { TriggerObject } from "@/components/three/TriggerObject";
+import { ModelSelectorPlaceholder } from "@/components/three/ModelSelectorPlaceholder";
+import { RepairCaseModel } from "@/components/three/RepairCaseModel";
+
+const ZONE_ORIGIN = [10, 0.4, -8] as const;
+const CASE_MODEL_PATH = "/models/packderelance/model.gltf";
+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>
+
+      <TriggerObject
+        position={[ZONE_ORIGIN[0], ZONE_ORIGIN[1], ZONE_ORIGIN[2]]}
+        colliders="cuboid"
+        label={caseOpen ? "Fermer la mallette" : "Ouvrir la mallette"}
+        onTrigger={() => setCaseOpen((value) => !value)}
+      >
+        <RepairCaseModel
+          modelPath={CASE_MODEL_PATH}
+          open={caseOpen}
+          position={[0, -0.45, 0]}
+          scale={0.35}
+        />
+      </TriggerObject>
+
+      <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/ModelSelectorPlaceholder.tsx

@@ -0,0 +1,93 @@
+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 { useModelSelection } from "@/hooks/useModelSelection";
+import type { Vector3Tuple } from "@/types/three";
+
+interface ModelSelectorPlaceholderProps {
+  position: Vector3Tuple;
+  label: string;
+}
+
+export function ModelSelectorPlaceholder({
+  position,
+  label,
+}: ModelSelectorPlaceholderProps): React.JSX.Element {
+  const [selectedModel, setSelectedModel] = useState<ModelCatalogItem | null>(
+    null,
+  );
+  const [split, setSplit] = useState(false);
+  const handleSelect = useCallback((model: ModelCatalogItem) => {
+    setSelectedModel(model);
+    setSplit(false);
+  }, []);
+  const selection = useModelSelection(MAIN_FEATURE_MODEL_CATALOG, handleSelect);
+  const triggerLabel = selectedModel
+    ? split
+      ? `Réassembler ${label}`
+      : `Démonter ${label}`
+    : `Choisir ${label}`;
+
+  return (
+    <group>
+      <TriggerObject
+        position={position}
+        colliders="cuboid"
+        label={triggerLabel}
+        onTrigger={() => {
+          if (selectedModel) {
+            setSplit((value) => !value);
+            return;
+          }
+
+          selection.open();
+        }}
+      >
+        {selectedModel ? (
+          <ExplodableModel
+            modelPath={selectedModel.path}
+            split={split}
+            position={[0, -0.35, 0]}
+            scale={0.45}
+          />
+        ) : (
+          <mesh castShadow receiveShadow>
+            <boxGeometry args={[1, 0.18, 1]} />
+            <meshStandardMaterial
+              color="#38bdf8"
+              emissive="#082f49"
+              roughness={0.55}
+            />
+          </mesh>
+        )}
+      </TriggerObject>
+
+      {selection.isOpen ? (
+        <Html position={[position[0], position[1] + 1.2, position[2]]} center>
+          <div className="model-selector-panel">
+            <strong>{label}</strong>
+            <span>Fleches: choisir</span>
+            <span>E/Enter: valider</span>
+            <ul>
+              {MAIN_FEATURE_MODEL_CATALOG.map((model, index) => (
+                <li
+                  key={model.path}
+                  className={
+                    index === selection.selectedIndex
+                      ? "is-selected"
+                      : undefined
+                  }
+                >
+                  {model.name}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </Html>
+      ) : null}
+    </group>
+  );
+}

src/components/three/SimpleModel.tsx

@@ -1,5 +1,5 @@
 import { useGLTF } from "@react-three/drei";
-import type { Vector3Tuple } from "@/types/3d";
+import type { Vector3Tuple } from "@/types/three";
 
 export interface SimpleModelConfig {
   modelPath: string;

src/components/three/TriggerObject.tsx

@@ -25,6 +25,7 @@ interface TriggerObjectProps {
   soundVolume?: number;
   spawnModel?: string;
   spawnOffset?: Vector3Tuple;
+  onTrigger?: () => void;
 }
 
 let _spawnCounter = 0;
@@ -49,6 +50,7 @@ export function TriggerObject({
   soundVolume = TRIGGER_DEFAULT_SOUND_VOLUME,
   spawnModel,
   spawnOffset = TRIGGER_DEFAULT_SPAWN_OFFSET,
+  onTrigger,
 }: TriggerObjectProps): React.JSX.Element {
   const [spawned, setSpawned] = useState<SpawnedModel[]>([]);
 
@@ -64,6 +66,8 @@ export function TriggerObject({
               AudioManager.getInstance().playSound(soundPath, soundVolume);
             }
 
+            onTrigger?.();
+
             if (spawnModel) {
               const spawnPos: Vector3Tuple = [
                 position[0] + spawnOffset[0],

src/components/three/index.ts

@@ -4,5 +4,10 @@ export type { AnimatedModelConfig } from "./AnimatedModel";
 export { SimpleModel } from "./SimpleModel";
 export type { SimpleModelConfig } from "./SimpleModel";
 
+export { ExplodableModel } from "./ExplodableModel";
+export { MainFeatureZone } from "./MainFeatureZone";
+export { ModelSelectorPlaceholder } from "./ModelSelectorPlaceholder";
+export { RepairCaseModel } from "./RepairCaseModel";
+
 export { useCharacterAnimation } from "@/hooks/useCharacterAnimation";
 export type { CharacterAnimationConfig } from "@/hooks/useCharacterAnimation";