@tonyclaw/agent-inspector 4.0.1 → 4.0.2

package/src/components/inspector-pet/InspectorPetCrab3D.tsx

@@ -1,455 +0,0 @@
-import { type JSX, useEffect, useRef, useState } from "react";
-import {
-  ACESFilmicToneMapping,
-  AmbientLight,
-  type BufferGeometry,
-  CircleGeometry,
-  Color,
-  CylinderGeometry,
-  DirectionalLight,
-  Group,
-  HemisphereLight,
-  type Material,
-  Mesh,
-  MeshBasicMaterial,
-  MeshPhysicalMaterial,
-  type Object3D,
-  OrthographicCamera,
-  PointLight,
-  Scene,
-  SphereGeometry,
-  SRGBColorSpace,
-  Vector3,
-  WebGLRenderer,
-} from "three";
-import { CrabLogo } from "../ui/crab-logo";
-import type { InspectorPetMood } from "./inspectorPetLogic";
-
-type InspectorPetCrab3DProps = {
-  mood: InspectorPetMood;
-  moving: boolean;
-  reduceMotion: boolean;
-};
-
-type AnimatedLeg = {
-  group: Group;
-  phase: number;
-  side: number;
-};
-
-type AnimatedEye = {
-  group: Group;
-  phase: number;
-  pupil: Mesh;
-  pupilRest: Vector3;
-};
-
-type AnimatedPincer = {
-  direction: number;
-  mesh: Mesh;
-  restRotationZ: number;
-  restY: number;
-};
-
-type AnimatedClaw = {
-  group: Group;
-  pincers: AnimatedPincer[];
-  scale: number;
-};
-
-type CrabSceneParts = {
-  bodyMaterial: MeshPhysicalMaterial;
-  dominantClaw: AnimatedClaw;
-  eyes: AnimatedEye[];
-  legs: AnimatedLeg[];
-  rimLight: PointLight;
-  root: Group;
-};
-
-function createRod(
-  start: Vector3,
-  end: Vector3,
-  radius: number,
-  material: MeshPhysicalMaterial,
-): Mesh {
-  const direction = end.clone().sub(start);
-  const length = direction.length();
-  const rod = new Mesh(new CylinderGeometry(radius, radius * 0.9, length, 12), material);
-  rod.position.copy(start.clone().add(end).multiplyScalar(0.5));
-  rod.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), direction.normalize());
-  return rod;
-}
-
-function addClaw(
-  root: Group,
-  side: number,
-  shellMaterial: MeshPhysicalMaterial,
-  accentMaterial: MeshPhysicalMaterial,
-): AnimatedClaw {
-  const clawScale = side < 0 ? 1.5 : 0.68;
-  const clawGroup = new Group();
-  const pincers: AnimatedPincer[] = [];
-  root.add(clawGroup);
-
-  const shoulder = new Vector3(side * 1.2, 0.25, -0.05);
-  const wrist = new Vector3(side * (1.65 + clawScale * 0.18), 0.5, 0);
-  const arm = createRod(shoulder, wrist, 0.16 * clawScale, accentMaterial);
-  clawGroup.add(arm);
-
-  const palm = new Mesh(new SphereGeometry(0.55, 24, 16), shellMaterial);
-  palm.position.set(side * (1.95 + clawScale * 0.16), 0.62, 0.05);
-  palm.scale.set(1.05 * clawScale, 0.72 * clawScale, 0.55 * clawScale);
-  clawGroup.add(palm);
-
-  for (const pincerDirection of [-1, 1]) {
-    const pincer = new Mesh(new SphereGeometry(0.36, 20, 14), accentMaterial);
-    pincer.position.set(
-      side * (2.22 + clawScale * 0.26),
-      0.62 + pincerDirection * 0.24 * clawScale,
-      0.08,
-    );
-    pincer.scale.set(1.05 * clawScale, 0.34 * clawScale, 0.42 * clawScale);
-    pincer.rotation.z = pincerDirection * side * 0.42;
-    clawGroup.add(pincer);
-    pincers.push({
-      direction: pincerDirection,
-      mesh: pincer,
-      restRotationZ: pincer.rotation.z,
-      restY: pincer.position.y,
-    });
-  }
-
-  return { group: clawGroup, pincers, scale: clawScale };
-}
-
-function pinchPulse(cycleTime: number, start: number, duration: number): number {
-  const progress = (cycleTime - start) / duration;
-  if (progress <= 0 || progress >= 1) return 0;
-  return Math.sin(progress * Math.PI);
-}
-
-function dominantClawGrip(elapsed: number): number {
-  const cycleTime = elapsed % 6.8;
-  return Math.max(pinchPulse(cycleTime, 0.72, 0.82), pinchPulse(cycleTime, 1.72, 0.68));
-}
-
-function addEyes(
-  root: Group,
-  shellMaterial: MeshPhysicalMaterial,
-  eyeMaterial: MeshPhysicalMaterial,
-): AnimatedEye[] {
-  const eyes: AnimatedEye[] = [];
-  for (const side of [-1, 1]) {
-    const stalkStart = new Vector3(side * 0.48, 0.68, 0.05);
-    const stalkEnd = new Vector3(side * 0.1, 0.82, 0.07);
-    const eyeGroup = new Group();
-    eyeGroup.position.copy(stalkStart);
-    eyeGroup.add(createRod(new Vector3(0, 0, 0), stalkEnd, 0.1, shellMaterial));
-
-    const eye = new Mesh(new SphereGeometry(0.24, 20, 16), eyeMaterial);
-    eye.position.copy(stalkEnd);
-    eye.scale.set(1, 1, 0.85);
-    eyeGroup.add(eye);
-
-    const pupil = new Mesh(
-      new SphereGeometry(0.105, 16, 12),
-      new MeshPhysicalMaterial({ color: 0x111827, roughness: 0.25 }),
-    );
-    const pupilRest = new Vector3(stalkEnd.x, stalkEnd.y, stalkEnd.z + 0.2);
-    pupil.position.copy(pupilRest);
-    eyeGroup.add(pupil);
-    root.add(eyeGroup);
-    eyes.push({
-      group: eyeGroup,
-      phase: side < 0 ? 0 : Math.PI / 3,
-      pupil,
-      pupilRest,
-    });
-  }
-  return eyes;
-}
-
-function addLegs(root: Group, legMaterial: MeshPhysicalMaterial): AnimatedLeg[] {
-  const legs: AnimatedLeg[] = [];
-  for (const side of [-1, 1]) {
-    for (let index = 0; index < 4; index += 1) {
-      const leg = new Group();
-      const baseY = -0.3 - index * 0.22;
-      leg.position.set(side * (0.8 + index * 0.12), baseY, -0.18);
-      leg.add(
-        createRod(
-          new Vector3(0, 0, 0),
-          new Vector3(side * (0.62 + index * 0.06), -0.34, 0),
-          0.095,
-          legMaterial,
-        ),
-      );
-      leg.add(
-        createRod(
-          new Vector3(side * (0.58 + index * 0.06), -0.31, 0),
-          new Vector3(side * (1.02 + index * 0.08), -0.88 + index * 0.07, 0.04),
-          0.075,
-          legMaterial,
-        ),
-      );
-      root.add(leg);
-      legs.push({ group: leg, phase: index * Math.PI + (side > 0 ? Math.PI / 2 : 0), side });
-    }
-  }
-  return legs;
-}
-
-function createCrabScene(scene: Scene): CrabSceneParts {
-  const shellMaterial = new MeshPhysicalMaterial({
-    color: 0xf59e0b,
-    roughness: 0.34,
-    metalness: 0.04,
-    clearcoat: 0.78,
-    clearcoatRoughness: 0.18,
-    emissive: new Color(0x000000),
-    emissiveIntensity: 0,
-  });
-  const accentMaterial = new MeshPhysicalMaterial({
-    color: 0xfb923c,
-    roughness: 0.42,
-    metalness: 0.02,
-    clearcoat: 0.52,
-    clearcoatRoughness: 0.28,
-  });
-  const legMaterial = new MeshPhysicalMaterial({
-    color: 0xd97706,
-    roughness: 0.48,
-    clearcoat: 0.35,
-    clearcoatRoughness: 0.35,
-  });
-  const eyeMaterial = new MeshPhysicalMaterial({
-    color: 0xfffbeb,
-    roughness: 0.22,
-    clearcoat: 0.8,
-    clearcoatRoughness: 0.12,
-  });
-
-  const root = new Group();
-  root.rotation.x = -0.12;
-  root.rotation.y = -0.08;
-  root.scale.setScalar(1.08);
-  scene.add(root);
-
-  const shadow = new Mesh(
-    new CircleGeometry(1.65, 40),
-    new MeshBasicMaterial({ color: 0x111827, transparent: true, opacity: 0.16, depthWrite: false }),
-  );
-  shadow.position.set(0, -1.33, -0.65);
-  shadow.scale.set(1.4, 0.34, 1);
-  root.add(shadow);
-
-  const body = new Mesh(new SphereGeometry(1, 36, 24), shellMaterial);
-  body.position.set(0, 0.02, 0);
-  body.scale.set(1.58, 0.92, 0.68);
-  root.add(body);
-
-  const lowerShell = new Mesh(new SphereGeometry(0.92, 28, 20), accentMaterial);
-  lowerShell.position.set(0, -0.48, 0.22);
-  lowerShell.scale.set(1.28, 0.42, 0.56);
-  root.add(lowerShell);
-
-  const dominantClaw = addClaw(root, -1, shellMaterial, accentMaterial);
-  addClaw(root, 1, shellMaterial, accentMaterial);
-  const eyes = addEyes(root, shellMaterial, eyeMaterial);
-  const legs = addLegs(root, legMaterial);
-
-  scene.add(new AmbientLight(0xfff7ed, 1.65));
-  scene.add(new HemisphereLight(0xfff7ed, 0x172033, 2.15));
-  const keyLight = new DirectionalLight(0xffffff, 3.6);
-  keyLight.position.set(3.5, 4.5, 6);
-  scene.add(keyLight);
-  const fillLight = new DirectionalLight(0xfbbf24, 1.35);
-  fillLight.position.set(-4, 1.5, 4);
-  scene.add(fillLight);
-  const rimLight = new PointLight(0xf59e0b, 1.8, 12, 2);
-  rimLight.position.set(0, 1.8, 4.5);
-  scene.add(rimLight);
-
-  return { bodyMaterial: shellMaterial, dominantClaw, eyes, legs, rimLight, root };
-}
-
-function moodColor(mood: InspectorPetMood): number {
-  switch (mood) {
-    case "active":
-      return 0x22d3ee;
-    case "attention":
-      return 0xef4444;
-    case "idle":
-      return 0xf59e0b;
-    case "sleeping":
-      return 0x94a3b8;
-  }
-}
-
-function isDisposableMesh(object: Object3D): object is Mesh<BufferGeometry, Material | Material[]> {
-  return object instanceof Mesh;
-}
-
-function disposeScene(scene: Scene): void {
-  const materials = new Set<Material>();
-  scene.traverse((object: Object3D) => {
-    if (!isDisposableMesh(object)) return;
-    object.geometry.dispose();
-    const material = object.material;
-    if (Array.isArray(material)) {
-      for (const item of material) materials.add(item);
-      return;
-    }
-    materials.add(material);
-  });
-  for (const material of materials) material.dispose();
-}
-
-export function InspectorPetCrab3D({
-  mood,
-  moving,
-  reduceMotion,
-}: InspectorPetCrab3DProps): JSX.Element {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const moodRef = useRef(mood);
-  const movingRef = useRef(moving);
-  const reduceMotionRef = useRef(reduceMotion);
-  const [renderFailed, setRenderFailed] = useState(false);
-
-  useEffect(() => {
-    moodRef.current = mood;
-  }, [mood]);
-
-  useEffect(() => {
-    movingRef.current = moving;
-  }, [moving]);
-
-  useEffect(() => {
-    reduceMotionRef.current = reduceMotion;
-  }, [reduceMotion]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (canvas === null) return undefined;
-
-    let renderer: WebGLRenderer;
-    try {
-      renderer = new WebGLRenderer({
-        alpha: true,
-        antialias: true,
-        canvas,
-        powerPreference: "low-power",
-        preserveDrawingBuffer: true,
-      });
-    } catch {
-      setRenderFailed(true);
-      return undefined;
-    }
-
-    renderer.setClearColor(0x000000, 0);
-    renderer.outputColorSpace = SRGBColorSpace;
-    renderer.toneMapping = ACESFilmicToneMapping;
-    renderer.toneMappingExposure = 1.18;
-
-    const scene = new Scene();
-    const camera = new OrthographicCamera(-3.65, 3.65, 3.65, -3.65, 0.1, 20);
-    camera.position.set(0, 0.05, 8);
-    camera.lookAt(0, 0, 0);
-    const parts = createCrabScene(scene);
-    const startedAt = window.performance.now();
-    let lastFrameAt = 0;
-
-    const renderFrame = (timestamp: number): void => {
-      if (timestamp - lastFrameAt < 32) return;
-      lastFrameAt = timestamp;
-      const elapsed = (timestamp - startedAt) / 1000;
-      const motionAllowed = !reduceMotionRef.current;
-      const gait = movingRef.current ? 1 : moodRef.current === "active" ? 0.42 : 0;
-      const idleMotion = motionAllowed ? Math.sin(elapsed * 0.85) : 0;
-      const stepMotion = motionAllowed ? Math.sin(elapsed * 3.4) : 0;
-      const clawGrip = motionAllowed ? dominantClawGrip(elapsed) : 0;
-
-      parts.root.position.y = idleMotion * 0.035 + Math.abs(stepMotion) * 0.055 * gait;
-      parts.root.rotation.y = -0.08 + idleMotion * 0.055;
-      parts.root.rotation.z = stepMotion * 0.028 * gait;
-      parts.dominantClaw.group.rotation.z = -clawGrip * 0.035;
-      for (const pincer of parts.dominantClaw.pincers) {
-        pincer.mesh.position.y =
-          pincer.restY - pincer.direction * parts.dominantClaw.scale * 0.16 * clawGrip;
-        pincer.mesh.rotation.z = pincer.restRotationZ * (1 - clawGrip * 0.72);
-      }
-      for (const leg of parts.legs) {
-        leg.group.rotation.z =
-          motionAllowed && gait > 0
-            ? Math.sin(elapsed * 4.25 + leg.phase) * 0.2 * leg.side * gait
-            : 0;
-        leg.group.rotation.x = motionAllowed && gait > 0 ? stepMotion * 0.045 * gait : 0;
-      }
-      for (const eye of parts.eyes) {
-        const gaze = motionAllowed ? Math.sin(elapsed * 0.72 + eye.phase) : 0;
-        const lift = motionAllowed ? Math.cos(elapsed * 0.9 + eye.phase) : 0;
-        eye.group.rotation.z = gaze * 0.075;
-        eye.group.rotation.x = lift * 0.025;
-        eye.pupil.position.set(
-          eye.pupilRest.x + gaze * 0.055,
-          eye.pupilRest.y + lift * 0.025,
-          eye.pupilRest.z,
-        );
-      }
-
-      const color = moodColor(moodRef.current);
-      parts.rimLight.color.setHex(color);
-      parts.rimLight.intensity = moodRef.current === "attention" ? 3.2 : 1.8;
-      parts.bodyMaterial.emissive.setHex(color);
-      parts.bodyMaterial.emissiveIntensity = moodRef.current === "active" ? 0.12 : 0.035;
-      renderer.render(scene, camera);
-    };
-
-    const resize = (): void => {
-      const width = Math.max(canvas.clientWidth, 1);
-      const height = Math.max(canvas.clientHeight, 1);
-      renderer.setDrawingBufferSize(width, height, Math.min(window.devicePixelRatio, 2));
-      renderer.render(scene, camera);
-    };
-    const resizeObserver =
-      typeof ResizeObserver === "undefined" ? null : new ResizeObserver(resize);
-    if (resizeObserver === null) {
-      window.addEventListener("resize", resize);
-    } else {
-      resizeObserver.observe(canvas);
-    }
-    resize();
-
-    const handleContextLost = (event: Event): void => {
-      event.preventDefault();
-      setRenderFailed(true);
-    };
-    canvas.addEventListener("webglcontextlost", handleContextLost);
-    renderer.setAnimationLoop(renderFrame);
-
-    return () => {
-      renderer.setAnimationLoop(null);
-      if (resizeObserver === null) {
-        window.removeEventListener("resize", resize);
-      } else {
-        resizeObserver.disconnect();
-      }
-      canvas.removeEventListener("webglcontextlost", handleContextLost);
-      disposeScene(scene);
-      renderer.dispose();
-    };
-  }, []);
-
-  return (
-    <span className="relative flex size-24 items-center justify-center" aria-hidden="true">
-      <canvas
-        ref={canvasRef}
-        className={renderFailed ? "hidden" : "block size-full bg-transparent"}
-        data-inspector-pet-canvas="true"
-      />
-      {renderFailed && (
-        <CrabLogo className="size-22 text-amber-500 drop-shadow-[0_0_18px_rgba(245,158,11,0.28)]" />
-      )}
-    </span>
-  );
-}