Release Healer Man 0.1.9

src/ui/CharacterPreview3D.tsx

@@ -5,6 +5,12 @@ import type { CharacterDraft, CharacterProfile } from "../app/types";
 import { CharacterModel } from "../avatar/CharacterModel";
 import { ProceduralAvatar } from "../avatar/ProceduralAvatar";
 import { classById, raceById } from "../app/characterCatalog";
+import {
+  numericFrameRateLimit,
+  type PreviewFrameRateLimit,
+} from "../game/frameRateSettings";
+import { useDocumentVisibility } from "../platform/useDocumentVisibility";
+import { CappedFrameLoop } from "../scene/CappedFrameLoop";
 
 function FittedCharacter({
   characterClassColor,
@@ -30,19 +36,34 @@ function FittedCharacter({
   );
 }
 
-export default function CharacterPreview3D({ source }: {
+export default function CharacterPreview3D({ frameRateLimit, source }: {
+  frameRateLimit: PreviewFrameRateLimit;
   source: CharacterProfile | CharacterDraft;
 }) {
   const race = raceById(source.raceId);
   const characterClass = classById(source.classId);
   const turnDegrees = "rotation" in source ? source.rotation : -8;
+  const documentVisible = useDocumentVisibility();
+  const targetFps = numericFrameRateLimit(frameRateLimit);
+  const frameloop = !documentVisible
+    ? "demand"
+    : targetFps === null ? "always" : "never";
   return (
-    <div className="character-preview__viewport" aria-hidden="true">
+    <div
+      className="character-preview__viewport"
+      aria-hidden="true"
+      data-frame-rate-limit={frameRateLimit}
+      data-frame-loop={frameloop}
+    >
       <Canvas
         dpr={[1, 1.25]}
+        frameloop={frameloop}
         camera={{ fov: 32, near: 0.05, far: 40, position: [3.2, 1.8, 4.6] }}
-        gl={{ alpha: true, antialias: true, powerPreference: "high-performance" }}
+        gl={{ alpha: true, antialias: true, powerPreference: "default" }}
       >
+        {targetFps !== null && frameloop === "never" && (
+          <CappedFrameLoop active={documentVisible} targetFps={targetFps} />
+        )}
         <ambientLight intensity={1.15} color="#d8e2ca" />
         <hemisphereLight args={["#d8e9ce", "#142019", 1.8]} />
         <directionalLight position={[3, 5, 4]} intensity={2.1} color="#f0e5bf" />