talking-head-studio 0.2.0

package/dist/editor/RigidAccessory.js

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import { useGLTF, PivotControls } from '@react-three/drei';
+import { useEffect, useMemo, useState } from 'react';
+import { Box3, Vector3 } from 'three';
+export function RigidAccessory({ assetId, url, avatarScene, attachBone, offsetPosition, offsetRotation, scale = 1, isEditing = false, onPlacementChange, }) {
+    const { scene } = useGLTF(url);
+    // Clone uniquely for this instance
+    const clone = useMemo(() => scene.clone(true), [scene]);
+    const [basePos, setBasePos] = useState(null);
+    useEffect(() => {
+        if (!avatarScene)
+            return;
+        let targetBone = null;
+        avatarScene.traverse((child) => {
+            if (child.isBone && child.name === attachBone) {
+                targetBone = child;
+            }
+        });
+        if (!targetBone)
+            return;
+        const box = new Box3().setFromObject(clone);
+        const meshMin = box.min;
+        const meshCenter = new Vector3();
+        box.getCenter(meshCenter);
+        const boneWorldPos = new Vector3();
+        targetBone.getWorldPosition(boneWorldPos);
+        setBasePos(new Vector3(boneWorldPos.x - meshCenter.x, boneWorldPos.y - meshMin.y, boneWorldPos.z - meshCenter.z));
+    }, [avatarScene, attachBone, clone]);
+    // Apply transforms live
+    useEffect(() => {
+        if (!basePos)
+            return;
+        clone.position.copy(basePos);
+        if (offsetPosition) {
+            clone.position.x += offsetPosition[0];
+            clone.position.y += offsetPosition[1];
+            clone.position.z += offsetPosition[2];
+        }
+        if (offsetRotation) {
+            clone.rotation.set(...offsetRotation);
+        }
+        if (scale !== undefined) {
+            clone.scale.set(scale, scale, scale);
+        }
+    }, [basePos, offsetPosition, offsetRotation, scale, clone]);
+    const handleDragEnd = () => {
+        if (!basePos)
+            return;
+        // The PivotControls autoTransform updates the object directly
+        const newOffsetPos = [
+            clone.position.x - basePos.x,
+            clone.position.y - basePos.y,
+            clone.position.z - basePos.z,
+        ];
+        const newOffsetRot = [
+            clone.rotation.x,
+            clone.rotation.y,
+            clone.rotation.z,
+        ];
+        const currentScale = clone.scale.x;
+        onPlacementChange?.(assetId, {
+            bone: attachBone,
+            position: newOffsetPos,
+            rotation: newOffsetRot,
+            scale: currentScale,
+        });
+    };
+    if (!basePos)
+        return null;
+    if (isEditing) {
+        return (<PivotControls anchor={[0, 0, 0]} scale={100} fixed={true} depthTest={false} activeAxes={[true, true, true]} onDragEnd={handleDragEnd} autoTransform={true}>
+        <primitive object={clone}/>
+      </PivotControls>);
+    }
+    return <primitive object={clone}/>;
+}

package/dist/editor/SkinnedClothing.d.ts

@@ -0,0 +1,7 @@
+interface SkinnedClothingProps {
+    url: string;
+    avatarSkeleton: any;
+}
+export declare function SkinnedClothing({ url, avatarSkeleton }: SkinnedClothingProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SkinnedClothing.d.ts.map

package/dist/editor/SkinnedClothing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkinnedClothing.d.ts","sourceRoot":"","sources":["../../src/editor/SkinnedClothing.tsx"],"names":[],"mappings":"AAMA,UAAU,oBAAoB;IAC5B,GAAG,EAAE,MAAM,CAAC;IAEZ,cAAc,EAAE,GAAG,CAAC;CACrB;AAwED,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,cAAc,EAAE,EAAE,oBAAoB,+BA+B5E"}

package/dist/editor/SkinnedClothing.js

@@ -0,0 +1,88 @@
+// @ts-nocheck
+import { useGLTF } from '@react-three/drei';
+import { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils.js';
+/**
+ * Rebind a skinned mesh's bones to the avatar skeleton by matching bone names.
+ * This handles hair packs / clothing that share the same rig convention but
+ * were exported as separate files with their own skeleton.
+ */
+function rebindToAvatarSkeleton(mesh, avatarSkeleton) {
+    const avatarBonesByName = new Map();
+    avatarSkeleton.bones.forEach((bone) => avatarBonesByName.set(bone.name, bone));
+    // Build a new bone array for this mesh by matching names
+    const newBones = [];
+    const oldBones = mesh.skeleton.bones;
+    const boneIndexMap = new Map(); // old index → new index
+    oldBones.forEach((oldBone, oldIdx) => {
+        const matched = avatarBonesByName.get(oldBone.name);
+        if (matched) {
+            boneIndexMap.set(oldIdx, newBones.length);
+            newBones.push(matched);
+        }
+    });
+    if (newBones.length === 0) {
+        // No bone names matched at all — just bind directly and hope for the best
+        mesh.bind(avatarSkeleton);
+        return;
+    }
+    // Remap skinIndex buffer to point at the new bone indices
+    const skinIndex = mesh.geometry.attributes.skinIndex;
+    const remappedIndex = skinIndex.array.slice();
+    for (let i = 0; i < remappedIndex.length; i++) {
+        const oldIdx = remappedIndex[i];
+        const newIdx = boneIndexMap.get(oldIdx);
+        remappedIndex[i] = newIdx !== undefined ? newIdx : 0;
+    }
+    mesh.geometry.setAttribute('skinIndex', new THREE.Uint16BufferAttribute(remappedIndex, skinIndex.itemSize));
+    // Build inverse bind matrices for the matched bones
+    const inverseBindMatrices = [];
+    newBones.forEach((bone) => {
+        const m = new THREE.Matrix4();
+        // Use the avatar skeleton's inverse bind matrix if bone index aligns,
+        // otherwise compute from world matrix
+        const avatarIdx = avatarSkeleton.bones.indexOf(bone);
+        if (avatarIdx >= 0 && avatarSkeleton.boneInverses[avatarIdx]) {
+            m.copy(avatarSkeleton.boneInverses[avatarIdx]);
+        }
+        else {
+            m.copy(bone.matrixWorld).invert();
+        }
+        inverseBindMatrices.push(...m.elements);
+    });
+    const newSkeleton = new THREE.Skeleton(newBones, newBones.map((_, i) => {
+        const m = new THREE.Matrix4();
+        m.fromArray(inverseBindMatrices, i * 16);
+        return m;
+    }));
+    mesh.bind(newSkeleton);
+}
+export function SkinnedClothing({ url, avatarSkeleton }) {
+    const { scene } = useGLTF(url);
+    const groupRef = useRef(null);
+    useEffect(() => {
+        const group = groupRef.current;
+        if (!group || !scene || !avatarSkeleton)
+            return;
+        const clone = SkeletonUtils.clone(scene);
+        clone.traverse((child) => {
+            if (child.isSkinnedMesh) {
+                rebindToAvatarSkeleton(child, avatarSkeleton);
+            }
+        });
+        group.add(clone);
+        return () => {
+            group.remove(clone);
+            clone.traverse((child) => {
+                if (child.geometry)
+                    child.geometry.dispose();
+                if (child.material) {
+                    const materials = Array.isArray(child.material) ? child.material : [child.material];
+                    materials.forEach((m) => m.dispose());
+                }
+            });
+        };
+    }, [scene, avatarSkeleton]);
+    return <group ref={groupRef}/>;
+}

package/dist/editor/index.d.ts

@@ -0,0 +1,6 @@
+export { AvatarCanvas } from './AvatarCanvas';
+export { AvatarModel } from './AvatarModel';
+export { RigidAccessory } from './RigidAccessory';
+export { SkinnedClothing } from './SkinnedClothing';
+export type { AvatarEditorProps, AssetPlacement, EquippedAsset } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/editor/index.js

@@ -0,0 +1,4 @@
+export { AvatarCanvas } from './AvatarCanvas';
+export { AvatarModel } from './AvatarModel';
+export { RigidAccessory } from './RigidAccessory';
+export { SkinnedClothing } from './SkinnedClothing';

package/dist/editor/types.d.ts

@@ -0,0 +1,28 @@
+import type { AvatarAppearance } from '../appearance';
+import type React from 'react';
+export interface AssetPlacement {
+    bone: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale?: number;
+}
+export interface EquippedAsset {
+    id: string;
+    url: string;
+    type: 'rigid' | 'skinned';
+    slot?: string;
+    attach_bone?: string;
+    offset_position?: [number, number, number];
+    offset_rotation?: [number, number, number];
+}
+export interface AvatarEditorProps {
+    avatarUrl: string;
+    appearance?: AvatarAppearance;
+    equipped?: EquippedAsset[];
+    placements?: Record<string, AssetPlacement>;
+    editingAssetId?: string | null;
+    onPlacementChange?: (assetId: string, placement: AssetPlacement) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/editor/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/editor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}

package/dist/editor/types.js

@@ -0,0 +1 @@
+export {};

package/dist/html.d.ts

@@ -0,0 +1,13 @@
+export type AvatarConfig = {
+    avatarUrl: string;
+    authToken?: string | null;
+    mood: 'neutral' | 'happy' | 'sad' | 'angry' | 'excited' | 'thinking' | 'concerned' | 'surprised';
+    cameraView: 'head' | 'upper' | 'full';
+    cameraDistance: number;
+    /** Initial colors only — live updates go via postMessage (setHairColor etc.) */
+    initialHairColor?: string;
+    initialSkinColor?: string;
+    initialEyeColor?: string;
+};
+export declare function buildAvatarHtml(config: AvatarConfig): string;
+//# sourceMappingURL=html.d.ts.map

package/dist/html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC;IACjG,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CA+iB5D"}