@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/avatar/VrmFootShadow.d.ts

@@ -0,0 +1,18 @@
+import type { VRM } from "@pixiv/three-vrm";
+import * as THREE from "three";
+/**
+ * Manages a soft radial shadow disc placed beneath the VRM avatar's feet.
+ */
+export declare class VrmFootShadow {
+    private mesh;
+    private readonly tempLeft;
+    private readonly tempRight;
+    private readonly tempCenter;
+    /** Create (or recreate) the shadow disc and add it to `scene`. */
+    create(scene: THREE.Scene): void;
+    /** Update shadow position to follow the VRM on the ground plane. */
+    update(vrm: VRM): void;
+    /** Remove and dispose of the shadow mesh, releasing GPU resources. */
+    dispose(scene: THREE.Scene): void;
+}
+//# sourceMappingURL=VrmFootShadow.d.ts.map

package/components/avatar/VrmFootShadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VrmFootShadow.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/VrmFootShadow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,IAAI,CAA2B;IACvC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAChD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAuB;IACjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAuB;IAElD,kEAAkE;IAClE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI;IAkChC,oEAAoE;IACpE,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IA4BtB,sEAAsE;IACtE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI;CAkBlC"}

package/components/avatar/VrmFootShadow.js

@@ -0,0 +1,83 @@
+import * as THREE from "three";
+/**
+ * Manages a soft radial shadow disc placed beneath the VRM avatar's feet.
+ */
+export class VrmFootShadow {
+    mesh = null;
+    tempLeft = new THREE.Vector3();
+    tempRight = new THREE.Vector3();
+    tempCenter = new THREE.Vector3();
+    /** Create (or recreate) the shadow disc and add it to `scene`. */
+    create(scene) {
+        this.dispose(scene);
+        const shadowCanvas = document.createElement("canvas");
+        shadowCanvas.width = 128;
+        shadowCanvas.height = 128;
+        const context = shadowCanvas.getContext("2d");
+        if (!context)
+            return;
+        const gradient = context.createRadialGradient(64, 64, 0, 64, 64, 64);
+        gradient.addColorStop(0, "rgba(0, 0, 0, 0.4)");
+        gradient.addColorStop(0.5, "rgba(0, 0, 0, 0.2)");
+        gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, 128, 128);
+        const shadowTexture = new THREE.CanvasTexture(shadowCanvas);
+        const shadowGeometry = new THREE.PlaneGeometry(2.2, 2.2);
+        const shadowMaterial = new THREE.MeshBasicMaterial({
+            map: shadowTexture,
+            transparent: true,
+            alphaTest: 0.001,
+            depthWrite: false,
+        });
+        const shadow = new THREE.Mesh(shadowGeometry, shadowMaterial);
+        shadow.rotation.x = -Math.PI / 2;
+        shadow.position.set(0, 0, 0);
+        scene.add(shadow);
+        this.mesh = shadow;
+    }
+    /** Update shadow position to follow the VRM on the ground plane. */
+    update(vrm) {
+        if (!this.mesh)
+            return;
+        vrm.scene.updateMatrixWorld(true);
+        const leftFoot = vrm.humanoid?.getNormalizedBoneNode("leftFoot");
+        const rightFoot = vrm.humanoid?.getNormalizedBoneNode("rightFoot");
+        if (leftFoot && rightFoot) {
+            leftFoot.getWorldPosition(this.tempLeft);
+            rightFoot.getWorldPosition(this.tempRight);
+            this.tempCenter
+                .copy(this.tempLeft)
+                .add(this.tempRight)
+                .multiplyScalar(0.5);
+            this.mesh.position.copy(this.tempCenter);
+            return;
+        }
+        const bounds = new THREE.Box3().setFromObject(vrm.scene);
+        if (!bounds.isEmpty()) {
+            bounds.getCenter(this.tempCenter);
+            this.mesh.position.set(this.tempCenter.x, bounds.min.y, this.tempCenter.z);
+        }
+    }
+    /** Remove and dispose of the shadow mesh, releasing GPU resources. */
+    dispose(scene) {
+        if (!this.mesh)
+            return;
+        scene.remove(this.mesh);
+        this.mesh.geometry.dispose();
+        const material = this.mesh.material;
+        if (Array.isArray(material)) {
+            for (const mat of material) {
+                const meshMat = mat;
+                meshMat.map?.dispose();
+                meshMat.dispose();
+            }
+        }
+        else {
+            const meshMat = material;
+            meshMat.map?.dispose();
+            meshMat.dispose();
+        }
+        this.mesh = null;
+    }
+}

package/components/avatar/VrmViewer.d.ts

@@ -0,0 +1,60 @@
+/**
+ * VRM avatar canvas component.
+ *
+ * Renders a VRM model with idle animation and mouth-sync driven by
+ * the `mouthOpen` prop. Sized to fill its parent container.
+ */
+import { type CameraProfile, type InteractionMode, VrmEngine, type VrmEngineDebugInfo, type VrmEngineState } from "./VrmEngine";
+export type VrmViewerProps = {
+    /** When false the loaded scene stays resident but the render loop is paused */
+    active?: boolean;
+    /** Path to the VRM file to load (default: bundled Miwaifus #1) */
+    vrmPath?: string;
+    mouthOpen: number;
+    /** When true the engine generates mouth animation internally */
+    isSpeaking?: boolean;
+    /** Enable drag-rotate + wheel/pinch zoom camera controls */
+    interactive?: boolean;
+    /** Camera profile preset (chat default, companion for hero-stage framing) */
+    cameraProfile?: CameraProfile;
+    /** Interaction behavior for camera controls */
+    interactiveMode?: InteractionMode;
+    /** Optional Gaussian splat world behind the avatar */
+    worldUrl?: string;
+    /** Enable springy drag/touch camera offset instead of orbit controls */
+    pointerParallax?: boolean;
+    onEngineState?: (state: VrmEngineState) => void;
+    onEngineReady?: (engine: VrmEngine) => void;
+    onRevealStart?: () => void;
+};
+type VrmEngineDebugRegistryEntry = {
+    id: string;
+    role: "world-stage" | "chat-avatar";
+    vrmPath: string;
+    worldUrl: string | null;
+    engine: VrmEngine;
+    getDebugInfo: () => VrmEngineDebugInfo;
+};
+declare global {
+    interface Window {
+        __ELIZA_VRM_ENGINES__?: VrmEngineDebugRegistryEntry[];
+        __captureVrmPreviews__?: typeof captureVrmPreviews;
+    }
+}
+/**
+ * Dev utility: capture preview PNGs for all bundled VRM avatars with spring bone
+ * physics disabled (hair/cloth in rest pose). Call from the browser console:
+ *
+ *   await window.__captureVrmPreviews__()
+ *
+ * Each VRM is loaded in sequence, a snapshot is taken with physics frozen, and
+ * the resulting PNG is downloaded. The existing world-stage engine is reused
+ * if available; otherwise a temporary offscreen engine is created.
+ */
+declare function captureVrmPreviews(options?: {
+    width?: number;
+    height?: number;
+}): Promise<void>;
+export declare function VrmViewer(props: VrmViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VrmViewer.d.ts.map

package/components/avatar/VrmViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VrmViewer.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/VrmViewer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACpB,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,+CAA+C;IAC/C,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,GAAG,aAAa,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,MAAM,kBAAkB,CAAC;CACxC,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,qBAAqB,CAAC,EAAE,2BAA2B,EAAE,CAAC;QACtD,sBAAsB,CAAC,EAAE,OAAO,kBAAkB,CAAC;KACpD;CACF;AAED;;;;;;;;;GASG;AACH,iBAAe,kBAAkB,CAAC,OAAO,CAAC,EAAE;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,OAAO,CAAC,IAAI,CAAC,CAiDhB;AAOD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CA2W9C"}

package/components/avatar/VrmViewer.js

@@ -0,0 +1,396 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * VRM avatar canvas component.
+ *
+ * Renders a VRM model with idle animation and mouth-sync driven by
+ * the `mouthOpen` prop. Sized to fill its parent container.
+ */
+import { useEffect, useEffectEvent, useRef } from "react";
+import { getVrmCount, getVrmUrl } from "../../state/vrm";
+import { VrmEngine, } from "./VrmEngine";
+const DEFAULT_VRM_PATH = getVrmUrl(1);
+/**
+ * Dev utility: capture preview PNGs for all bundled VRM avatars with spring bone
+ * physics disabled (hair/cloth in rest pose). Call from the browser console:
+ *
+ *   await window.__captureVrmPreviews__()
+ *
+ * Each VRM is loaded in sequence, a snapshot is taken with physics frozen, and
+ * the resulting PNG is downloaded. The existing world-stage engine is reused
+ * if available; otherwise a temporary offscreen engine is created.
+ */
+async function captureVrmPreviews(options) {
+    const width = options?.width ?? 512;
+    const height = options?.height ?? 768;
+    // Try to reuse the existing world-stage engine, fall back to any available engine
+    const registry = window.__ELIZA_VRM_ENGINES__ ?? [];
+    const registryEntry = registry.find((e) => e.role === "world-stage") ?? registry[0] ?? null;
+    const engine = registryEntry?.engine ?? null;
+    if (!engine) {
+        console.error("[captureVrmPreviews] No active VRM engine found. Navigate to the character view first.");
+        return;
+    }
+    const count = getVrmCount();
+    console.log(`[captureVrmPreviews] Capturing ${count} VRM previews at ${width}×${height} with physics disabled...`);
+    for (let i = 1; i <= count; i++) {
+        const vrmUrl = getVrmUrl(i);
+        const slug = vrmUrl.split("/").pop()?.replace(/\.vrm(\.gz)?$/, "") ?? `vrm-${i}`;
+        console.log(`[captureVrmPreviews] Loading VRM ${i}/${count}: ${slug}...`);
+        try {
+            await engine.loadVrmFromUrl(vrmUrl, slug);
+            // Let the idle animation settle
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            const blob = await engine.snapshot({ width, height, disablePhysics: true });
+            if (!blob) {
+                console.warn(`[captureVrmPreviews] Failed to capture ${slug}`);
+                continue;
+            }
+            // Download the PNG
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `${slug}.png`;
+            a.click();
+            URL.revokeObjectURL(url);
+            console.log(`[captureVrmPreviews] Saved ${slug}.png`);
+        }
+        catch (err) {
+            console.error(`[captureVrmPreviews] Error capturing ${slug}:`, err);
+        }
+    }
+    console.log("[captureVrmPreviews] Done!");
+}
+// Expose globally in dev mode
+if (typeof window !== "undefined") {
+    window.__captureVrmPreviews__ = captureVrmPreviews;
+}
+export function VrmViewer(props) {
+    const canvasRef = useRef(null);
+    const engineRef = useRef(null);
+    const mouthOpenRef = useRef(props.mouthOpen);
+    const activeRef = useRef(props.active ?? true);
+    const isSpeakingRef = useRef(props.isSpeaking ?? false);
+    const interactiveRef = useRef(props.interactive ?? false);
+    const cameraProfileRef = useRef(props.cameraProfile ?? "chat");
+    const interactionModeRef = useRef(props.interactiveMode ?? "free");
+    const pointerParallaxRef = useRef(props.pointerParallax ?? false);
+    const worldUrlRef = useRef(props.worldUrl ?? "");
+    const prefersWorldRendererRef = useRef(Boolean(props.worldUrl));
+    const lastStateEmitMsRef = useRef(0);
+    const mountedRef = useRef(true);
+    const currentVrmPathRef = useRef("");
+    const currentWorldPathRef = useRef("");
+    const worldLoadPromiseRef = useRef(null);
+    const pointerStateRef = useRef({
+        active: false,
+        id: null,
+        startX: 0,
+        startY: 0,
+    });
+    const onEngineReadyRef = useRef(props.onEngineReady);
+    const onEngineStateRef = useRef(props.onEngineState);
+    const onRevealStartRef = useRef(props.onRevealStart);
+    const revealStartedRef = useRef(false);
+    const debugRegistryIdRef = useRef(`vrm-viewer-${Math.random().toString(36).slice(2, 10)}`);
+    mouthOpenRef.current = props.mouthOpen;
+    activeRef.current = props.active ?? true;
+    isSpeakingRef.current = props.isSpeaking ?? false;
+    interactiveRef.current = props.interactive ?? false;
+    cameraProfileRef.current = props.cameraProfile ?? "chat";
+    interactionModeRef.current = props.interactiveMode ?? "free";
+    pointerParallaxRef.current = props.pointerParallax ?? false;
+    worldUrlRef.current = props.worldUrl ?? "";
+    prefersWorldRendererRef.current = Boolean(props.worldUrl);
+    onEngineReadyRef.current = props.onEngineReady;
+    onEngineStateRef.current = props.onEngineState;
+    onRevealStartRef.current = props.onRevealStart;
+    const syncDebugRegistry = useEffectEvent(() => {
+        if (!import.meta.env.DEV)
+            return;
+        if (typeof window === "undefined")
+            return;
+        const engine = engineRef.current;
+        const registry = window.__ELIZA_VRM_ENGINES__ ?? [];
+        const id = debugRegistryIdRef.current;
+        const nextEntry = engine
+            ? {
+                id,
+                role: props.worldUrl ? "world-stage" : "chat-avatar",
+                vrmPath: props.vrmPath ?? DEFAULT_VRM_PATH,
+                worldUrl: props.worldUrl ?? null,
+                engine,
+                getDebugInfo: () => engine.getDebugInfo(),
+            }
+            : null;
+        window.__ELIZA_VRM_ENGINES__ = nextEntry
+            ? [...registry.filter((entry) => entry.id !== id), nextEntry]
+            : registry.filter((entry) => entry.id !== id);
+    });
+    // Setup engine once
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        mountedRef.current = true;
+        let engine = engineRef.current;
+        if (!engine || !engine.isInitialized()) {
+            engine = new VrmEngine();
+            engineRef.current = engine;
+        }
+        engine.setup(canvas, () => {
+            // Frame loop: guard all state-setting calls against unmount.
+            if (!mountedRef.current)
+                return;
+            engine.setMouthOpen(mouthOpenRef.current);
+            engine.setSpeaking(isSpeakingRef.current);
+            const now = performance.now();
+            if (now - lastStateEmitMsRef.current >= 250) {
+                lastStateEmitMsRef.current = now;
+                const state = engine.getState();
+                if (state.revealStarted && !revealStartedRef.current) {
+                    revealStartedRef.current = true;
+                    onRevealStartRef.current?.();
+                }
+                onEngineStateRef.current?.(state);
+            }
+        }, {
+            rendererPreference: prefersWorldRendererRef.current ? "webgl" : "auto",
+            sparkOptimized: prefersWorldRendererRef.current,
+        });
+        engine.setPaused(!activeRef.current);
+        // One-time initial camera/control setup (subsequent changes handled by effects).
+        engine.setCameraProfile(cameraProfileRef.current);
+        engine.setInteractionMode(interactionModeRef.current);
+        engine.setInteractionEnabled(interactiveRef.current);
+        engine.setPointerParallaxEnabled(pointerParallaxRef.current);
+        const resize = () => {
+            const el = canvasRef.current;
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            engine.resize(rect.width, rect.height);
+        };
+        const resizeObserver = typeof ResizeObserver !== "undefined"
+            ? new ResizeObserver(() => resize())
+            : null;
+        resizeObserver?.observe(canvas);
+        window.addEventListener("resize", resize);
+        void engine.whenReady().then(() => {
+            if (!mountedRef.current)
+                return;
+            resize();
+            syncDebugRegistry();
+            onEngineReadyRef.current?.(engine);
+        }, (error) => {
+            console.warn("Failed to initialize VRM renderer:", error);
+        });
+        return () => {
+            mountedRef.current = false;
+            window.removeEventListener("resize", resize);
+            resizeObserver?.disconnect();
+            engine.dispose();
+            if (engineRef.current === engine) {
+                engineRef.current = null;
+            }
+            syncDebugRegistry();
+        };
+    }, []);
+    useEffect(() => {
+        syncDebugRegistry();
+    });
+    useEffect(() => {
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        engine.setPaused(!(props.active ?? true));
+    }, [props.active]);
+    useEffect(() => {
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        engine.setInteractionEnabled(props.interactive ?? false);
+    }, [props.interactive]);
+    useEffect(() => {
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        engine.setCameraProfile(props.cameraProfile ?? "chat");
+    }, [props.cameraProfile]);
+    useEffect(() => {
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        engine.setInteractionMode(props.interactiveMode ?? "free");
+    }, [props.interactiveMode]);
+    useEffect(() => {
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        engine.setPointerParallaxEnabled(props.pointerParallax ?? false);
+        if (!(props.pointerParallax ?? false)) {
+            engine.resetPointerParallax();
+        }
+    }, [props.pointerParallax]);
+    // Load VRM when path changes
+    useEffect(() => {
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        const vrmUrl = props.vrmPath ?? DEFAULT_VRM_PATH;
+        if (vrmUrl === currentVrmPathRef.current)
+            return;
+        currentVrmPathRef.current = vrmUrl;
+        revealStartedRef.current = false;
+        const abortController = new AbortController();
+        void (async () => {
+            try {
+                await engine.whenReady();
+                if (!mountedRef.current || abortController.signal.aborted)
+                    return;
+                const worldUrl = worldUrlRef.current;
+                if (worldUrl) {
+                    if (worldUrl !== currentWorldPathRef.current) {
+                        currentWorldPathRef.current = worldUrl;
+                        const worldLoadPromise = (async () => {
+                            await engine.setWorldUrl(worldUrl);
+                        })();
+                        worldLoadPromiseRef.current = worldLoadPromise;
+                        try {
+                            await worldLoadPromise;
+                        }
+                        finally {
+                            if (worldLoadPromiseRef.current === worldLoadPromise) {
+                                worldLoadPromiseRef.current = null;
+                            }
+                        }
+                    }
+                    else if (worldLoadPromiseRef.current) {
+                        await worldLoadPromiseRef.current;
+                    }
+                }
+                if (!mountedRef.current || abortController.signal.aborted)
+                    return;
+                await engine.loadVrmFromUrl(vrmUrl, vrmUrl.split("/").pop() ?? "avatar.vrm");
+                if (!mountedRef.current || abortController.signal.aborted)
+                    return;
+                const state = engine.getState();
+                if (state.revealStarted && !revealStartedRef.current) {
+                    revealStartedRef.current = true;
+                    onRevealStartRef.current?.();
+                }
+                onEngineStateRef.current?.(state);
+            }
+            catch (err) {
+                if (err instanceof Error && err.name === "AbortError")
+                    return;
+                if (currentVrmPathRef.current === vrmUrl) {
+                    currentVrmPathRef.current = "";
+                }
+                console.warn("Failed to load VRM:", err);
+            }
+        })();
+        return () => {
+            abortController.abort();
+            if (currentVrmPathRef.current === vrmUrl) {
+                currentVrmPathRef.current = "";
+            }
+        };
+    }, [props.vrmPath]);
+    useEffect(() => {
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        const worldUrl = props.worldUrl ?? "";
+        if (worldUrl === currentWorldPathRef.current)
+            return;
+        currentWorldPathRef.current = worldUrl;
+        const abortController = new AbortController();
+        let worldLoadPromise = null;
+        worldLoadPromise = (async () => {
+            try {
+                await engine.whenReady();
+                if (!mountedRef.current || abortController.signal.aborted)
+                    return;
+                await engine.setWorldUrl(worldUrl || null);
+            }
+            catch (err) {
+                console.warn("Failed to load splat world:", err);
+            }
+            finally {
+                if (worldLoadPromiseRef.current === worldLoadPromise) {
+                    worldLoadPromiseRef.current = null;
+                }
+            }
+        })();
+        worldLoadPromiseRef.current = worldLoadPromise;
+        return () => {
+            abortController.abort();
+            if (currentWorldPathRef.current === worldUrl) {
+                currentWorldPathRef.current = "";
+            }
+            if (worldLoadPromiseRef.current === worldLoadPromise) {
+                worldLoadPromiseRef.current = null;
+            }
+        };
+    }, [props.worldUrl]);
+    const updateParallaxFromPointer = (clientX, clientY, release = false) => {
+        const engine = engineRef.current;
+        const canvas = canvasRef.current;
+        const pointerState = pointerStateRef.current;
+        if (!engine || !canvas || !pointerParallaxRef.current)
+            return;
+        if (release) {
+            engine.resetPointerParallax();
+            return;
+        }
+        const rect = canvas.getBoundingClientRect();
+        const deltaX = clientX - pointerState.startX;
+        const deltaY = clientY - pointerState.startY;
+        const normalizedX = rect.width > 0 ? deltaX / rect.width : 0;
+        const normalizedY = rect.height > 0 ? deltaY / rect.height : 0;
+        engine.setPointerParallaxTarget(normalizedX * 2.2, -normalizedY * 2.2);
+    };
+    return (_jsx("canvas", { ref: canvasRef, onPointerDown: (event) => {
+            if (!pointerParallaxRef.current)
+                return;
+            pointerStateRef.current = {
+                active: true,
+                id: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+            };
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }, onPointerMove: (event) => {
+            const pointerState = pointerStateRef.current;
+            if (!pointerParallaxRef.current ||
+                !pointerState.active ||
+                pointerState.id !== event.pointerId) {
+                return;
+            }
+            updateParallaxFromPointer(event.clientX, event.clientY);
+        }, onPointerUp: (event) => {
+            const pointerState = pointerStateRef.current;
+            if (pointerState.id !== event.pointerId)
+                return;
+            pointerStateRef.current.active = false;
+            event.currentTarget.releasePointerCapture(event.pointerId);
+            updateParallaxFromPointer(event.clientX, event.clientY, true);
+        }, onPointerCancel: (event) => {
+            const pointerState = pointerStateRef.current;
+            if (pointerState.id !== event.pointerId)
+                return;
+            pointerStateRef.current.active = false;
+            updateParallaxFromPointer(event.clientX, event.clientY, true);
+        }, style: {
+            position: "absolute",
+            inset: 0,
+            display: "block",
+            width: "100vw",
+            height: "100vh",
+            minWidth: "100vw",
+            minHeight: "100vh",
+            background: "transparent",
+            cursor: props.pointerParallax || props.interactive ? "grab" : "default",
+            touchAction: props.pointerParallax ? "none" : "auto",
+        } }));
+}

package/components/avatar/mixamoVRMRigMap.d.ts

@@ -0,0 +1,3 @@
+import type { VRMHumanBoneName } from "@pixiv/three-vrm";
+export declare const mixamoVRMRigMap: Record<string, VRMHumanBoneName>;
+//# sourceMappingURL=mixamoVRMRigMap.d.ts.map

package/components/avatar/mixamoVRMRigMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixamoVRMRigMap.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/mixamoVRMRigMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAyD5D,CAAC"}

package/components/avatar/mixamoVRMRigMap.js

@@ -0,0 +1,56 @@
+// Mixamo -> VRM humanoid bone mapping.
+// Keys are normalized to `mixamorig<JointName>`.
+export const mixamoVRMRigMap = {
+    mixamorigHips: "hips",
+    mixamorigSpine: "spine",
+    mixamorigSpine1: "chest",
+    mixamorigSpine2: "upperChest",
+    mixamorigNeck: "neck",
+    mixamorigHead: "head",
+    mixamorigLeftShoulder: "leftShoulder",
+    mixamorigLeftArm: "leftUpperArm",
+    mixamorigLeftForeArm: "leftLowerArm",
+    mixamorigLeftHand: "leftHand",
+    mixamorigLeftHandThumb1: "leftThumbMetacarpal",
+    mixamorigLeftHandThumb2: "leftThumbProximal",
+    mixamorigLeftHandThumb3: "leftThumbDistal",
+    mixamorigLeftHandIndex1: "leftIndexProximal",
+    mixamorigLeftHandIndex2: "leftIndexIntermediate",
+    mixamorigLeftHandIndex3: "leftIndexDistal",
+    mixamorigLeftHandMiddle1: "leftMiddleProximal",
+    mixamorigLeftHandMiddle2: "leftMiddleIntermediate",
+    mixamorigLeftHandMiddle3: "leftMiddleDistal",
+    mixamorigLeftHandRing1: "leftRingProximal",
+    mixamorigLeftHandRing2: "leftRingIntermediate",
+    mixamorigLeftHandRing3: "leftRingDistal",
+    mixamorigLeftHandPinky1: "leftLittleProximal",
+    mixamorigLeftHandPinky2: "leftLittleIntermediate",
+    mixamorigLeftHandPinky3: "leftLittleDistal",
+    mixamorigRightShoulder: "rightShoulder",
+    mixamorigRightArm: "rightUpperArm",
+    mixamorigRightForeArm: "rightLowerArm",
+    mixamorigRightHand: "rightHand",
+    mixamorigRightHandPinky1: "rightLittleProximal",
+    mixamorigRightHandPinky2: "rightLittleIntermediate",
+    mixamorigRightHandPinky3: "rightLittleDistal",
+    mixamorigRightHandRing1: "rightRingProximal",
+    mixamorigRightHandRing2: "rightRingIntermediate",
+    mixamorigRightHandRing3: "rightRingDistal",
+    mixamorigRightHandMiddle1: "rightMiddleProximal",
+    mixamorigRightHandMiddle2: "rightMiddleIntermediate",
+    mixamorigRightHandMiddle3: "rightMiddleDistal",
+    mixamorigRightHandIndex1: "rightIndexProximal",
+    mixamorigRightHandIndex2: "rightIndexIntermediate",
+    mixamorigRightHandIndex3: "rightIndexDistal",
+    mixamorigRightHandThumb1: "rightThumbMetacarpal",
+    mixamorigRightHandThumb2: "rightThumbProximal",
+    mixamorigRightHandThumb3: "rightThumbDistal",
+    mixamorigLeftUpLeg: "leftUpperLeg",
+    mixamorigLeftLeg: "leftLowerLeg",
+    mixamorigLeftFoot: "leftFoot",
+    mixamorigLeftToeBase: "leftToes",
+    mixamorigRightUpLeg: "rightUpperLeg",
+    mixamorigRightLeg: "rightLowerLeg",
+    mixamorigRightFoot: "rightFoot",
+    mixamorigRightToeBase: "rightToes",
+};

package/components/avatar/retargetMixamoFbxToVrm.d.ts

@@ -0,0 +1,9 @@
+import type { VRM } from "@pixiv/three-vrm";
+import * as THREE from "three";
+/**
+ * Retarget a Mixamo FBX animation clip onto a VRM.
+ * Quaternion tracks are converted into VRM space and position tracks are
+ * scaled by hips height ratio.
+ */
+export declare function retargetMixamoFbxToVrm(sourceScene: THREE.Group, sourceClip: THREE.AnimationClip, vrm: VRM): THREE.AnimationClip;
+//# sourceMappingURL=retargetMixamoFbxToVrm.d.ts.map

package/components/avatar/retargetMixamoFbxToVrm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"retargetMixamoFbxToVrm.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/retargetMixamoFbxToVrm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAoB,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoC/B;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,KAAK,CAAC,KAAK,EACxB,UAAU,EAAE,KAAK,CAAC,aAAa,EAC/B,GAAG,EAAE,GAAG,GACP,KAAK,CAAC,aAAa,CAiGrB"}