forked from phenom/healer-man
22 lines
1.2 KiB
TypeScript
22 lines
1.2 KiB
TypeScript
import { useEffect, useMemo } from "react";
|
|
import { BufferGeometry, Float32BufferAttribute, DoubleSide } from "three";
|
|
import geometry from "../../server/generated/arena-geometry.json" with { type: "json" };
|
|
|
|
/** The fallback draws the same surfaces used by the authoritative simulation. */
|
|
export default function ArenaFallbackStage({ stageId }: { stageId: string }) {
|
|
const meshes = useMemo(() => {
|
|
const data = (geometry as Record<string, { navigation: number[]; collision: number[] }>)[stageId];
|
|
return ["navigation", "collision"].map((kind) => {
|
|
const mesh = new BufferGeometry();
|
|
mesh.setAttribute("position", new Float32BufferAttribute(data?.[kind as "navigation" | "collision"] ?? [], 3));
|
|
mesh.computeVertexNormals();
|
|
return mesh;
|
|
});
|
|
}, [stageId]);
|
|
useEffect(() => () => meshes.forEach((mesh) => mesh.dispose()), [meshes]);
|
|
return <group>
|
|
<mesh geometry={meshes[0]} position={[0, -.025, 0]} receiveShadow><meshStandardMaterial color="#536452" side={DoubleSide} roughness={.9} /></mesh>
|
|
<mesh geometry={meshes[1]} receiveShadow castShadow><meshStandardMaterial color="#66705e" side={DoubleSide} roughness={.85} /></mesh>
|
|
</group>;
|
|
}
|