90 lines
4.2 KiB
TypeScript
90 lines
4.2 KiB
TypeScript
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
|
|
import { useFrame } from "@react-three/fiber";
|
|
import { DoubleSide, Group } from "three";
|
|
import { subscribeContentManager } from "../content/contentManager";
|
|
import { combatMediaPackReady } from "../game/combatMediaPack";
|
|
import { type CombatSummon, useCombatStore } from "../game/combatStore";
|
|
import { getMobPosition } from "../game/mobRuntimeRegistry";
|
|
import { OriginalWowModel } from "./OriginalWowModel";
|
|
import { getPreparedShadowfiendMedia, preloadShadowfiendMedia } from "./shadowfiendMedia";
|
|
|
|
const SHADOWFIEND_CREATURE_ID = 19668;
|
|
|
|
function ShadowfiendFallback() {
|
|
return <group name="shadowfiend-fallback">
|
|
<mesh position={[0, 0.66, 0]} scale={[0.56, 0.77, 0.46]}>
|
|
<icosahedronGeometry args={[1, 1]} />
|
|
<meshStandardMaterial color="#241335" emissive="#492269" emissiveIntensity={0.7} roughness={0.85} />
|
|
</mesh>
|
|
{[-1, 1].map((side) => <group key={side} position={[side * 0.55, 0.9, 0]} rotation={[0, 0, side * -0.42]}>
|
|
<mesh position={[0, -0.37, 0]}><coneGeometry args={[0.18, 0.88, 5]} />
|
|
<meshStandardMaterial color="#2c1741" emissive="#371456" emissiveIntensity={0.5} />
|
|
</mesh>
|
|
<mesh position={[0, -0.83, 0.1]}><coneGeometry args={[0.12, 0.4, 5]} />
|
|
<meshStandardMaterial color="#a352dd" emissive="#8d35cc" emissiveIntensity={1.4} />
|
|
</mesh>
|
|
</group>)}
|
|
{[-1, 1].map((side) => <mesh key={side} position={[0.49, 0.87, side * 0.18]}>
|
|
<sphereGeometry args={[0.075, 8, 8]} />
|
|
<meshBasicMaterial color="#d68cff" />
|
|
</mesh>)}
|
|
<pointLight color="#7739b8" intensity={0.7} distance={2.5} />
|
|
</group>;
|
|
}
|
|
|
|
function ShadowfiendMember({ summon, active }: { readonly summon: CombatSummon; readonly active: boolean }) {
|
|
const [media, setMedia] = useState(getPreparedShadowfiendMedia);
|
|
const mediaReady = useSyncExternalStore(subscribeContentManager, combatMediaPackReady, () => false);
|
|
const group = useRef<Group>(null);
|
|
const playback = useRef({ elapsedMs: 0, decaying: false });
|
|
|
|
useEffect(() => {
|
|
if (!mediaReady) {
|
|
setMedia(null);
|
|
return;
|
|
}
|
|
let cancelled = false;
|
|
void preloadShadowfiendMedia().then((ready) => {
|
|
if (!cancelled) setMedia(ready);
|
|
}).catch(() => { if (!cancelled) setMedia(null); });
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [mediaReady]);
|
|
|
|
useFrame((_, delta) => {
|
|
if (!group.current) return;
|
|
const live = useCombatStore.getState().summons.find((candidate) => candidate.id === summon.id);
|
|
if (!live) return;
|
|
const goal = live.position;
|
|
const blend = Math.min(1, delta * 9);
|
|
group.current.position.x += (goal[0] - group.current.position.x) * blend;
|
|
group.current.position.y += (goal[1] + 0.13 - group.current.position.y) * blend;
|
|
group.current.position.z += (goal[2] - group.current.position.z) * blend;
|
|
const target = live.targetId ? getMobPosition(live.targetId) : null;
|
|
if (target) group.current.rotation.y = Math.atan2(goal[2] - target[2], target[0] - goal[0]);
|
|
if (active) playback.current.elapsedMs += Math.min(delta, 0.1) * 1_000;
|
|
});
|
|
|
|
return <group ref={group} name={`combat-summon:${summon.id}`}
|
|
position={[summon.position[0], summon.position[1] + 0.13, summon.position[2]]}>
|
|
<mesh name="shadowfiend-ground-aura" rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.1, 0]}>
|
|
<ringGeometry args={[0.38, 0.76, 28]} />
|
|
<meshBasicMaterial color="#8a46be" transparent opacity={0.38} depthWrite={false} side={DoubleSide} />
|
|
</mesh>
|
|
{media
|
|
? <group position={[0, 1.3, 0]} scale={0.65}><OriginalWowModel graph={media.graph} textures={media.textures}
|
|
active={active} playbackRef={playback} loop /></group>
|
|
: <ShadowfiendFallback />}
|
|
</group>;
|
|
}
|
|
|
|
/** Player and companion combat summons live outside the static dungeon population. */
|
|
export function CombatSummonPopulation({ active }: { readonly active: boolean }) {
|
|
const summons = useCombatStore((state) => state.summons);
|
|
return <group name="combat-summon-population">
|
|
{summons.filter((summon) => summon.creatureId === SHADOWFIEND_CREATURE_ID && summon.health > 0)
|
|
.map((summon) => <ShadowfiendMember key={summon.id} summon={summon} active={active} />)}
|
|
</group>;
|
|
}
|