talking-head-studio 0.2.5 → 0.2.7

package/src/editor/AvatarModel.tsx

@@ -1,49 +0,0 @@
-// @ts-nocheck
-import { useGLTF } from '@react-three/drei';
-import { useEffect, useRef } from 'react';
-import { Box3, Vector3 } from 'three';
-import { applyAppearanceToObject3D } from '../appearance';
-import type { AvatarAppearance } from '../appearance';
-
-interface AvatarModelProps {
-  url: string;
-  appearance?: AvatarAppearance;
-  scale?: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onSkeletonReady?: (skeleton: any) => void;
-  onBoundsReady?: (center: typeof Vector3.prototype, height: number) => void;
-}
-
-export function AvatarModel({
-  url,
-  appearance,
-  scale = 1,
-  onSkeletonReady,
-  onBoundsReady,
-}: AvatarModelProps) {
-  const { scene } = useGLTF(url);
-  const groupRef = useRef(null);
-
-  useEffect(() => {
-    if (!scene) return;
-    scene.traverse((child: any) => {
-      if (child.isSkinnedMesh && child.skeleton) {
-        onSkeletonReady?.(child.skeleton);
-      }
-    });
-    if (onBoundsReady) {
-      const box = new Box3().setFromObject(scene);
-      const center = new Vector3();
-      box.getCenter(center);
-      const height = box.max.y - box.min.y;
-      onBoundsReady(center, height);
-    }
-  }, [scene, onSkeletonReady, onBoundsReady]);
-
-  useEffect(() => {
-    if (!scene) return;
-    applyAppearanceToObject3D(scene, appearance ?? { version: 1 as const });
-  }, [scene, appearance]);
-
-  return <primitive ref={groupRef} object={scene} scale={scale} />;
-}

package/src/editor/RigidAccessory.tsx

@@ -1,130 +0,0 @@
-// @ts-nocheck
-import { useGLTF, PivotControls } from '@react-three/drei';
-import { useEffect, useMemo, useState } from 'react';
-import { Box3, Vector3 } from 'three';
-import type { AssetPlacement } from './types';
-
-interface RigidAccessoryProps {
-  assetId: string;
-  url: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  avatarScene: any;
-  attachBone: string;
-  offsetPosition?: [number, number, number];
-  offsetRotation?: [number, number, number];
-  scale?: number;
-  isEditing?: boolean;
-  onPlacementChange?: (assetId: string, placement: AssetPlacement) => void;
-}
-
-export function RigidAccessory({
-  assetId,
-  url,
-  avatarScene,
-  attachBone,
-  offsetPosition,
-  offsetRotation,
-  scale = 1,
-  isEditing = false,
-  onPlacementChange,
-}: RigidAccessoryProps) {
-  const { scene } = useGLTF(url);
-
-  // Clone uniquely for this instance
-  const clone = useMemo(() => scene.clone(true), [scene]);
-  const [basePos, setBasePos] = useState<typeof Vector3.prototype | null>(null);
-
-  useEffect(() => {
-    if (!avatarScene) return;
-
-    let targetBone: any = null;
-    avatarScene.traverse((child: any) => {
-      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: [number, number, number] = [
-      clone.position.x - basePos.x,
-      clone.position.y - basePos.y,
-      clone.position.z - basePos.z,
-    ];
-
-    const newOffsetRot: [number, number, number] = [
-      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/src/editor/SkinnedClothing.tsx

@@ -1,114 +0,0 @@
-// @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';
-
-interface SkinnedClothingProps {
-  url: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  avatarSkeleton: any;
-}
-
-/**
- * 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: THREE.SkinnedMesh, avatarSkeleton: THREE.Skeleton) {
-  const avatarBonesByName = new Map<string, THREE.Bone>();
-  avatarSkeleton.bones.forEach((bone: THREE.Bone) => avatarBonesByName.set(bone.name, bone));
-
-  // Build a new bone array for this mesh by matching names
-  const newBones: THREE.Bone[] = [];
-  const oldBones = mesh.skeleton.bones;
-  const boneIndexMap = new Map<number, number>(); // old index → new index
-
-  oldBones.forEach((oldBone: THREE.Bone, oldIdx: number) => {
-    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: number[] = [];
-  newBones.forEach((bone: THREE.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((_: THREE.Bone, i: number) => {
-      const m = new THREE.Matrix4();
-      m.fromArray(inverseBindMatrices, i * 16);
-      return m;
-    }),
-  );
-
-  mesh.bind(newSkeleton);
-}
-
-export function SkinnedClothing({ url, avatarSkeleton }: SkinnedClothingProps) {
-  const { scene } = useGLTF(url);
-  const groupRef = useRef<any>(null);
-
-  useEffect(() => {
-    const group = groupRef.current;
-    if (!group || !scene || !avatarSkeleton) return;
-
-    const clone = SkeletonUtils.clone(scene as any);
-
-    (clone as any).traverse((child: any) => {
-      if (child.isSkinnedMesh) {
-        rebindToAvatarSkeleton(child as THREE.SkinnedMesh, avatarSkeleton);
-      }
-    });
-
-    group.add(clone as any);
-
-    return () => {
-      group.remove(clone as any);
-      (clone as any).traverse((child: any) => {
-        if (child.geometry) child.geometry.dispose();
-        if (child.material) {
-          const materials = Array.isArray(child.material) ? child.material : [child.material];
-          materials.forEach((m: any) => m.dispose());
-        }
-      });
-    };
-  }, [scene, avatarSkeleton]);
-
-  return <group ref={groupRef} />;
-}

package/src/editor/index.ts

@@ -1,5 +0,0 @@
-export { AvatarCanvas } from './AvatarCanvas';
-export { AvatarModel } from './AvatarModel';
-export { RigidAccessory } from './RigidAccessory';
-export { SkinnedClothing } from './SkinnedClothing';
-export type { AvatarEditorProps, AssetPlacement, EquippedAsset } from './types';

package/src/editor/r3f-shim.d.ts

@@ -1,34 +0,0 @@
-/**
- * Minimal JSX intrinsic shims for React Three Fiber elements.
- * These are provided at runtime by @react-three/fiber (a peer dependency).
- * This file prevents TS errors when the peer dep types are not installed.
- */
-import type React from 'react';
-
-declare module 'react' {
-  namespace JSX {
-    interface IntrinsicElements {
-      // R3F primitives
-      primitive: {
-        object: any;
-        ref?: React.Ref<any>;
-        scale?: any;
-        [key: string]: any;
-      };
-      group: {
-        ref?: React.Ref<any>;
-        [key: string]: any;
-      };
-      // Three.js light intrinsics
-      ambientLight: {
-        intensity?: number;
-        [key: string]: any;
-      };
-      directionalLight: {
-        position?: [number, number, number];
-        intensity?: number;
-        [key: string]: any;
-      };
-    }
-  }
-}

package/src/editor/types.ts

@@ -1,30 +0,0 @@
-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;
-}