mbt-3d 0.1.0

package/README.md

@@ -0,0 +1,22 @@
+# mbt-3d
+
+React components for 3D character viewing with animations and morph targets.
+
+## Installation
+
+```bash
+npm install mbt-3d
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom three @react-three/fiber @react-three/drei
+```
+
+## Requirements
+
+- React >= 18.0.0
+- Three.js >= 0.150.0
+- @react-three/fiber >= 8.0.0
+- @react-three/drei >= 9.0.0

package/dist/index.d.ts

@@ -0,0 +1,556 @@
+import { ForwardRefExoticComponent } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { JSX as JSX_2 } from 'react';
+import { RefAttributes } from 'react';
+import * as THREE from 'three';
+
+/**
+ * AnimatedModel - 3D model with animation support and bone attachment capability
+ *
+ * @remarks
+ * This component:
+ * - Loads GLB/GLTF models with animations using useGLTF
+ * - Properly clones skinned meshes using SkeletonUtils for multiple instances
+ * - Plays animations with automatic crossfading
+ * - Supports morph targets for character customization
+ * - Provides context for BoneAttachment children
+ * - Exposes imperative API via ref for external animation control
+ *
+ * The ref provides these methods:
+ * - `playAnimation(name, options)` - Play an animation with optional loop/restore
+ * - `stopAnimation()` - Stop current animation
+ * - `getAnimationNames()` - Get list of available animations
+ * - `getGroup()` - Get the THREE.Group for advanced manipulation
+ * - `setMorphTarget(name, value)` - Set morph target value
+ * - `getMorphTargetNames()` - Get available morph target names
+ *
+ * @param ref - React ref for imperative API access
+ * @param url - URL or path to GLB/GLTF model file with animations. Example: `"/models/character.glb"`
+ * @param position - Model position in 3D space as [x, y, z]. Example: `[0, -1, 0]`. Default: `[0, 0, 0]`
+ * @param rotation - Model rotation in radians as [x, y, z]. Example: `[0, Math.PI, 0]`. Default: `[0, 0, 0]`
+ * @param scale - Uniform scale (number) or per-axis scale [x, y, z]. Examples: `0.5` or `[1, 2, 1]`. Default: `1`
+ * @param defaultAnimation - Name of animation to play on load. If not specified, plays first animation. Example: `"Idle"`
+ * @param morphTargets - Morph target values as key-value pairs where value is 0-1. Example: `{ muscular: 0.5, thin: 0.2 }`
+ * @param children - Child components, typically BoneAttachment components for attaching items
+ * @param onLoad - Callback when model loads. Receives AnimatedModelInfo object: `{ meshes, materials, bones, nodeCount, animations, morphTargetNames }`
+ * @param onError - Callback when model fails to load. Receives Error object
+ *
+ * @example
+ * ```tsx
+ * const modelRef = useRef<AnimatedModelHandle>(null);
+ *
+ * <AnimatedModel
+ *   ref={modelRef}
+ *   url="/models/character.glb"
+ *   defaultAnimation="Idle"
+ *   morphTargets={{ muscular: 0.5 }}
+ *   position={[0, -1, 0]}
+ * >
+ *   <BoneAttachment bone="hand_r">
+ *     <Model url="/models/sword.glb" />
+ *   </BoneAttachment>
+ * </AnimatedModel>
+ *
+ * // Control animations from outside
+ * modelRef.current?.playAnimation('Attack', { loop: false });
+ * ```
+ */
+export declare const AnimatedModel: ForwardRefExoticComponent<AnimatedModelProps & RefAttributes<AnimatedModelHandle>>;
+
+/**
+ * Imperative handle for AnimatedModel (accessed via ref)
+ *
+ * @example
+ * ```tsx
+ * ref.current?.playAnimation('Attack', { loop: false });
+ * ref.current?.setMorphTarget('muscular', 0.8);
+ * ```
+ */
+export declare interface AnimatedModelHandle {
+    /**
+     * Play an animation by name
+     * @param name - Animation name (supports partial matching)
+     * @param options - Playback options
+     */
+    playAnimation: (name: string, options?: {
+        /** Loop the animation continuously. Default: false */
+        loop?: boolean;
+        /** Duration of crossfade in seconds. Default: 0.2 */
+        crossFadeDuration?: number;
+        /** Restore default animation when this one finishes. Default: true */
+        restoreDefault?: boolean;
+    }) => void;
+    /** Stop the currently playing animation */
+    stopAnimation: () => void;
+    /** Get array of all available animation names */
+    getAnimationNames: () => string[];
+    /** Get the THREE.Group object for advanced manipulation */
+    getGroup: () => THREE.Group | null;
+    /**
+     * Set a morph target value
+     * @param name - Morph target name
+     * @param value - Value between 0 and 1
+     */
+    setMorphTarget: (name: string, value: number) => void;
+    /** Get array of all available morph target names */
+    getMorphTargetNames: () => string[];
+}
+
+/**
+ * Extended model information including animation and morph target data
+ */
+export declare interface AnimatedModelInfo extends ModelInfo {
+    /** Names of all animations in the model */
+    animations: string[];
+    /** Names of all morph targets (blend shapes) */
+    morphTargetNames: string[];
+}
+
+/**
+ * Props for AnimatedModel component
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<AnimatedModelHandle>(null);
+ *
+ * <AnimatedModel
+ *   ref={ref}
+ *   url="/character.glb"
+ *   defaultAnimation="Idle"
+ *   morphTargets={{ muscular: 0.5 }}
+ *   position={[0, -1, 0]}
+ * >
+ *   <BoneAttachment bone="hand_r">
+ *     <Model url="/sword.glb" />
+ *   </BoneAttachment>
+ * </AnimatedModel>
+ * ```
+ */
+export declare interface AnimatedModelProps extends Omit<ModelProps, 'onLoad'> {
+    /** Child components (typically BoneAttachment components) */
+    children?: React.ReactNode;
+    /** Name of animation to play on load (auto-plays first if not specified) */
+    defaultAnimation?: string;
+    /** Morph target values as key-value pairs { targetName: value } where value is 0-1 */
+    morphTargets?: Record<string, number>;
+    /** Callback when model loads with extended metadata including animations */
+    onLoad?: (info: AnimatedModelInfo) => void;
+}
+
+/**
+ * BoneAttachment - Attach models to bones of an AnimatedModel parent
+ *
+ * @remarks
+ * This component:
+ * - Must be used as a child of AnimatedModel
+ * - Uses React Three Fiber's createPortal to attach to a bone
+ * - Automatically follows bone transformations during animations
+ * - Supports position/rotation/scale offsets relative to the bone
+ *
+ * Common bone names:
+ * - Hand bones: "hand_r", "hand_l", "DEF-handR", "DEF-handL"
+ * - Spine/Back: "spine", "spine_upper", "back"
+ * - Head: "head", "neck"
+ *
+ * @param children - Child components to attach to the bone (typically Model components)
+ * @param bone - Bone name to attach to. Must match bone name in the parent AnimatedModel. Example: `"hand_r"` or `"DEF-handR"`
+ * @param position - Position offset relative to the bone as [x, y, z]. Example: `[0.1, 0, 0]`. Default: `[0, 0, 0]`
+ * @param rotation - Rotation offset relative to the bone in radians as [x, y, z]. Example: `[0, Math.PI/2, 0]`. Default: `[0, 0, 0]`
+ * @param scale - Uniform scale (number) or per-axis scale [x, y, z]. Examples: `0.7` or `[1, 2, 1]`. Default: `1`
+ *
+ * @example
+ * ```tsx
+ * <AnimatedModel url="/character.glb">
+ *   // Sword in right hand
+ *   <BoneAttachment
+ *     bone="hand_r"
+ *     position={[0.1, 0, 0]}
+ *     rotation={[0, Math.PI/2, 0]}
+ *   >
+ *     <Model url="/sword.glb" scale={0.7} />
+ *   </BoneAttachment>
+ *
+ *   // Shield on back
+ *   <BoneAttachment bone="spine_upper">
+ *     <Model url="/shield.glb" />
+ *   </BoneAttachment>
+ * </AnimatedModel>
+ * ```
+ */
+export declare function BoneAttachment({ children, bone, position, rotation, scale, }: BoneAttachmentProps): JSX_2.Element | null;
+
+/**
+ * Props for BoneAttachment component
+ *
+ * @remarks
+ * Must be used as a child of AnimatedModel
+ *
+ * @example
+ * ```tsx
+ * <AnimatedModel url="/character.glb">
+ *   <BoneAttachment
+ *     bone="hand_r"
+ *     position={[0.1, 0, 0]}
+ *     rotation={[0, Math.PI/2, 0]}
+ *   >
+ *     <Model url="/sword.glb" />
+ *   </BoneAttachment>
+ * </AnimatedModel>
+ * ```
+ */
+export declare interface BoneAttachmentProps {
+    /** Child components to attach to the bone */
+    children: React.ReactNode;
+    /**
+     * Bone name to attach to. Common names:
+     * - Hands: "hand_r", "hand_l", "DEF-handR", "DEF-handL"
+     * - Spine/Back: "spine", "spine_upper", "back"
+     * - Head: "head", "neck"
+     */
+    bone: string;
+    /** Position offset relative to the bone [x, y, z]. Default: [0, 0, 0] */
+    position?: [number, number, number];
+    /** Rotation offset relative to the bone in radians [x, y, z]. Default: [0, 0, 0] */
+    rotation?: [number, number, number];
+    /** Uniform scale (number) or per-axis scale [x, y, z]. Default: 1 */
+    scale?: number | [number, number, number];
+}
+
+/**
+ * Model - Simple 3D model component for loading and displaying GLB/GLTF files
+ *
+ * @remarks
+ * This component:
+ * - Loads GLB/GLTF models using drei's useGLTF hook
+ * - Automatically clones the scene for independent instances
+ * - Configures shadows on all meshes
+ * - Supports position, rotation, and scale transforms
+ * - Provides onLoad callback with model metadata
+ *
+ * @param url - URL or path to GLB/GLTF model file. Example: `"/models/sword.glb"`
+ * @param position - Model position in 3D space as [x, y, z]. Example: `[0, 0, 0]`. Default: `[0, 0, 0]`
+ * @param rotation - Model rotation in radians as [x, y, z]. Example: `[0, Math.PI/2, 0]`. Default: `[0, 0, 0]`
+ * @param scale - Uniform scale (number) or per-axis scale [x, y, z]. Examples: `0.5` or `[1, 2, 1]`. Default: `1`
+ * @param onLoad - Callback when model finishes loading. Receives ModelInfo object with metadata: `{ meshes, materials, bones, nodeCount }`
+ * @param onError - Callback when model fails to load. Receives Error object
+ *
+ * @example
+ * ```tsx
+ * <Model
+ *   url="/models/sword.glb"
+ *   position={[0, 0, 0]}
+ *   rotation={[0, Math.PI/2, 0]}
+ *   scale={0.5}
+ *   onLoad={(info) => console.log('Loaded:', info)}
+ * />
+ * ```
+ */
+export declare function Model({ url, position, rotation, scale, onLoad, onError, }: ModelProps): JSX.Element;
+
+export declare namespace Model {
+    var preload: (url: string) => void;
+}
+
+/**
+ * Metadata information about a loaded model
+ */
+export declare interface ModelInfo {
+    /** Names of all mesh objects in the model */
+    meshes: string[];
+    /** Names of all materials used by the model */
+    materials: string[];
+    /** Names of all bones (for skinned/rigged meshes) */
+    bones: string[];
+    /** Total number of nodes in the scene graph */
+    nodeCount: number;
+}
+
+/**
+ * Props for Model component
+ *
+ * @example
+ * ```tsx
+ * <Model
+ *   url="/models/sword.glb"
+ *   position={[0, 0, 0]}
+ *   rotation={[0, Math.PI/2, 0]}
+ *   scale={0.5}
+ * />
+ * ```
+ */
+export declare interface ModelProps {
+    /** URL or path to GLB/GLTF model file */
+    url: string;
+    /** Model position in 3D space [x, y, z]. Default: [0, 0, 0] */
+    position?: [number, number, number];
+    /** Model rotation in radians [x, y, z]. Default: [0, 0, 0] */
+    rotation?: [number, number, number];
+    /** Uniform scale (number) or per-axis scale [x, y, z]. Default: 1 */
+    scale?: number | [number, number, number];
+    /** Callback when model finishes loading with metadata */
+    onLoad?: (info: ModelInfo) => void;
+    /** Callback when model fails to load */
+    onError?: (error: Error) => void;
+}
+
+/**
+ * MorphableModel - 3D model with morph targets for shape customization
+ *
+ * @remarks
+ * This component:
+ * - Loads GLB/GLTF models with morph targets (blend shapes)
+ * - Dynamically discovers available morph targets from the model
+ * - Applies morph target values in real-time
+ * - Provides imperative API via ref for programmatic control
+ *
+ * Morph targets are commonly used for:
+ * - Character customization (muscular, thin, fat)
+ * - Facial expressions (smile, frown, blink)
+ * - Clothing fit adjustments
+ *
+ * @param ref - React ref for imperative API access
+ * @param url - URL or path to GLB/GLTF model file with morph targets. Example: `"/models/character.glb"`
+ * @param position - Model position in 3D space as [x, y, z]. Example: `[0, -1, 0]`. Default: `[0, 0, 0]`
+ * @param rotation - Model rotation in radians as [x, y, z]. Example: `[0, Math.PI, 0]`. Default: `[0, 0, 0]`
+ * @param scale - Uniform scale (number) or per-axis scale [x, y, z]. Examples: `0.5` or `[1, 2, 1]`. Default: `1`
+ * @param morphTargets - Morph target values as key-value pairs where value is 0-1. Example: `{ muscular: 0.5, thin: 0.2 }`
+ * @param onMorphTargetsFound - Callback when morph targets are discovered from the model. Receives array of morph target names: `["muscular", "thin", "fat"]`
+ * @param onLoad - Callback when model finishes loading. Receives ModelInfo object with metadata: `{ meshes, materials, bones, nodeCount }`
+ * @param onError - Callback when model fails to load. Receives Error object
+ *
+ * @example
+ * ```tsx
+ * const modelRef = useRef<MorphableModelHandle>(null);
+ * const [morphs, setMorphs] = useState({ muscular: 0.5, thin: 0.2 });
+ *
+ * <MorphableModel
+ *   ref={modelRef}
+ *   url="/models/character.glb"
+ *   morphTargets={morphs}
+ *   onMorphTargetsFound={(names) => console.log('Available:', names)}
+ *   position={[0, -1, 0]}
+ * />
+ *
+ * // Control programmatically
+ * modelRef.current?.setMorphTarget('muscular', 0.8);
+ * ```
+ */
+export declare const MorphableModel: ForwardRefExoticComponent<MorphableModelProps & RefAttributes<MorphableModelHandle>>;
+
+/**
+ * Imperative handle for MorphableModel (accessed via ref)
+ *
+ * @example
+ * ```tsx
+ * ref.current?.setMorphTarget('muscular', 0.8);
+ * const names = ref.current?.getMorphTargetNames();
+ * ```
+ */
+export declare interface MorphableModelHandle {
+    /**
+     * Set a morph target value
+     * @param name - Morph target name
+     * @param value - Value between 0 and 1
+     */
+    setMorphTarget: (name: string, value: number) => void;
+    /** Get array of all available morph target names */
+    getMorphTargetNames: () => string[];
+    /** Get current values of all morph targets */
+    getMorphTargetValues: () => Record<string, number>;
+}
+
+/**
+ * Props for MorphableModel component
+ *
+ * @example
+ * ```tsx
+ * <MorphableModel
+ *   url="/character.glb"
+ *   morphTargets={{ muscular: 0.5, thin: 0.2 }}
+ *   onMorphTargetsFound={(names) => console.log(names)}
+ * />
+ * ```
+ */
+export declare interface MorphableModelProps extends ModelProps {
+    /** Morph target values as key-value pairs { targetName: value } where value is 0-1 */
+    morphTargets?: Record<string, number>;
+    /** Callback when morph targets are discovered from the model */
+    onMorphTargetsFound?: (names: string[]) => void;
+}
+
+export declare function preloadModel(url: string): void;
+
+/**
+ * Scene3D - Main 3D scene container with built-in canvas, lighting, and controls
+ *
+ * @remarks
+ * This component wraps React Three Fiber's Canvas and provides:
+ * - OrbitControls for camera rotation (preserves state between model changes)
+ * - Configurable lighting (ambient + spot light)
+ * - Optional background (image URL or hex color like "#1a1a2e")
+ * - Optional contact shadows under models
+ * - Shadow support
+ *
+ * @param children - React children to render inside the 3D scene
+ * @param camera - Camera configuration object. Example: `{ position: [0, 2, 5], fov: 45 }`
+ * @param camera.position - Camera position as [x, y, z]. Example: `[0, 2, 5]`. Default: `[0, 2, 5]`
+ * @param camera.fov - Field of view in degrees. Example: `45`. Default: `45`
+ * @param controls - OrbitControls configuration object. Example: `{ enablePan: false, minDistance: 2, maxDistance: 10 }`
+ * @param controls.enabled - Enable/disable all controls. Default: `true`
+ * @param controls.enablePan - Enable camera panning with middle mouse. Default: `true`
+ * @param controls.enableZoom - Enable camera zoom with scroll wheel. Default: `true`
+ * @param controls.enableRotate - Enable camera rotation with left mouse. Default: `true`
+ * @param controls.minDistance - Minimum zoom distance. Example: `2`
+ * @param controls.maxDistance - Maximum zoom distance. Example: `10`
+ * @param controls.minPolarAngle - Minimum vertical rotation angle in radians. Example: `Math.PI / 4`
+ * @param controls.maxPolarAngle - Maximum vertical rotation angle in radians. Example: `Math.PI / 1.8`
+ * @param controls.autoRotate - Auto-rotate camera around the center. Default: `false`
+ * @param controls.autoRotateSpeed - Auto-rotation speed. Default: `2`
+ * @param background - Background: image URL (e.g., `"/bg.jpg"`) or hex color (e.g., `"#1a1a2e"`)
+ * @param shadows - Enable shadow rendering. Default: `true`
+ * @param ambientIntensity - Ambient light intensity (0-1). Example: `0.5`. Default: `0.5`
+ * @param spotLight - Spot light configuration object. Example: `{ position: [5, 10, 5], intensity: 50 }`
+ * @param spotLight.position - Light position as [x, y, z]. Example: `[5, 10, 5]`. Default: `[5, 10, 5]`
+ * @param spotLight.intensity - Light intensity. Example: `50`. Default: `50`
+ * @param spotLight.castShadow - Enable shadow casting. Default: `true`
+ * @param contactShadows - Contact shadows configuration. Can be `true` for default settings or object with custom settings. Example: `{ position: [0, -1, 0], opacity: 0.5, blur: 2 }`
+ * @param contactShadows.position - Shadow position as [x, y, z]. Example: `[0, -1, 0]`. Default: `[0, -1, 0]`
+ * @param contactShadows.opacity - Shadow opacity (0-1). Example: `0.5`. Default: `0.5`
+ * @param contactShadows.blur - Shadow blur amount. Example: `2`. Default: `2`
+ * @param style - Container style object. Example: `{ width: 400, height: 500 }`
+ * @param className - Container CSS class name
+ *
+ * @example
+ * ```tsx
+ * <Scene3D
+ *   camera={{ position: [0, 2, 5], fov: 45 }}
+ *   background="#1a1a2e"
+ *   shadows
+ *   style={{ width: 400, height: 500 }}
+ * >
+ *   <AnimatedModel url="/model.glb" position={[0, -1, 0]} />
+ * </Scene3D>
+ * ```
+ */
+export declare function Scene3D({ children, camera, controls, background, shadows, ambientIntensity, spotLight, contactShadows, style, className, }: Scene3DProps): JSX.Element;
+
+/**
+ * Props for Scene3D component
+ *
+ * @example
+ * ```tsx
+ * <Scene3D
+ *   camera={{ position: [0, 2, 5], fov: 45 }}
+ *   controls={{ enablePan: false, minDistance: 2 }}
+ *   background="#1a1a2e"
+ *   shadows
+ * >
+ *   {children}
+ * </Scene3D>
+ * ```
+ */
+export declare interface Scene3DProps {
+    /** React children to render inside the 3D scene */
+    children: React.ReactNode;
+    /** Camera configuration */
+    camera?: {
+        /** Camera position [x, y, z]. Default: [0, 2, 5] */
+        position?: [number, number, number];
+        /** Field of view in degrees. Default: 45 */
+        fov?: number;
+    };
+    /** OrbitControls configuration for camera rotation */
+    controls?: {
+        /** Enable/disable all controls. Default: true */
+        enabled?: boolean;
+        /** Enable camera panning (middle mouse). Default: true */
+        enablePan?: boolean;
+        /** Enable camera zoom (scroll wheel). Default: true */
+        enableZoom?: boolean;
+        /** Enable camera rotation (left mouse). Default: true */
+        enableRotate?: boolean;
+        /** Minimum zoom distance */
+        minDistance?: number;
+        /** Maximum zoom distance */
+        maxDistance?: number;
+        /** Minimum vertical rotation angle (radians) */
+        minPolarAngle?: number;
+        /** Maximum vertical rotation angle (radians) */
+        maxPolarAngle?: number;
+        /** Auto-rotate camera around the center. Default: false */
+        autoRotate?: boolean;
+        /** Auto-rotation speed. Default: 2 */
+        autoRotateSpeed?: number;
+    };
+    /** Background: image URL ("/bg.jpg") or hex color ("#1a1a2e") */
+    background?: string;
+    /** Enable shadow rendering. Default: true */
+    shadows?: boolean;
+    /** Ambient light intensity. Default: 0.5 */
+    ambientIntensity?: number;
+    /** Spot light configuration */
+    spotLight?: {
+        /** Light position [x, y, z]. Default: [5, 10, 5] */
+        position?: [number, number, number];
+        /** Light intensity. Default: 50 */
+        intensity?: number;
+        /** Enable shadow casting. Default: true */
+        castShadow?: boolean;
+    };
+    /** Contact shadows configuration (ground shadows under models) */
+    contactShadows?: boolean | {
+        /** Shadow position [x, y, z]. Default: [0, -1, 0] */
+        position?: [number, number, number];
+        /** Shadow opacity 0-1. Default: 0.5 */
+        opacity?: number;
+        /** Shadow blur amount. Default: 2 */
+        blur?: number;
+    };
+    /** Container style (e.g., { width: 400, height: 500 }) */
+    style?: React.CSSProperties;
+    /** Container CSS class name */
+    className?: string;
+}
+
+export declare function useAnimationController(animations: THREE.AnimationClip[], scene: THREE.Object3D, options?: UseAnimationControllerOptions): {
+    playAnimation: (name: string, opts?: {
+        loop?: boolean;
+        crossFadeDuration?: number;
+        restoreDefault?: boolean;
+    }) => void;
+    stopAnimation: () => void;
+    getAnimationNames: () => string[];
+    actions: {
+        [x: string]: THREE.AnimationAction | null;
+    };
+};
+
+declare interface UseAnimationControllerOptions {
+    defaultAnimation?: string;
+}
+
+export declare function useClonedModel(url: string, options?: UseClonedModelOptions): {
+    scene: THREE.Object3D<THREE.Object3DEventMap>;
+    animations: THREE.AnimationClip[];
+};
+
+declare interface UseClonedModelOptions {
+    onLoad?: (info: ModelInfo) => void;
+    onError?: (error: Error) => void;
+}
+
+export declare function useMorphTargets(scene: THREE.Object3D, initialValues?: Record<string, number>): {
+    setMorphTarget: (name: string, value: number) => void;
+    getMorphTargetNames: () => string[];
+    getMorphTargetValues: () => {
+        [x: string]: number;
+    };
+};
+
+export { }
+
+
+export declare namespace Model {
+    var preload: (url: string) => void;
+}
+

package/dist/mbt-3d.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),a=require("react"),D=require("@react-three/fiber"),M=require("@react-three/drei"),W=require("three");function _(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const w=_(W);function $({background:e}){const n=e==null?void 0:e.startsWith("#");return e?n?y.jsx("color",{attach:"background",args:[e]}):y.jsx(z,{url:e}):null}function z({url:e}){const n=M.useTexture(e);return a.useMemo(()=>{n.colorSpace=w.SRGBColorSpace},[n]),y.jsx("primitive",{attach:"background",object:n})}function V({children:e,camera:n={},controls:r={},background:t,shadows:s=!0,ambientIntensity:c=.5,spotLight:u={},contactShadows:b=!0,style:d,className:m}){const o={position:n.position||[0,2,5],fov:n.fov||45},i={enabled:r.enabled??!0,enablePan:r.enablePan??!0,enableZoom:r.enableZoom??!0,enableRotate:r.enableRotate??!0,minDistance:r.minDistance,maxDistance:r.maxDistance,minPolarAngle:r.minPolarAngle,maxPolarAngle:r.maxPolarAngle,autoRotate:r.autoRotate??!1,autoRotateSpeed:r.autoRotateSpeed??2},f={position:u.position||[5,10,5],intensity:u.intensity??50,castShadow:u.castShadow??!0},p=typeof b=="object"?{position:b.position||[0,-1,0],opacity:b.opacity??.5,blur:b.blur??2}:b?{position:[0,-1,0],opacity:.5,blur:2}:null;return y.jsx("div",{style:d,className:m,children:y.jsxs(D.Canvas,{shadows:s,camera:{position:o.position,fov:o.fov},style:{width:"100%",height:"100%"},children:[y.jsx(a.Suspense,{fallback:null,children:y.jsx($,{background:t})}),y.jsx("ambientLight",{intensity:c}),y.jsx("spotLight",{position:f.position,intensity:f.intensity,castShadow:f.castShadow}),y.jsx(a.Suspense,{fallback:null,children:e}),y.jsx(M.OrbitControls,{makeDefault:!0,enabled:i.enabled,enablePan:i.enablePan,enableZoom:i.enableZoom,enableRotate:i.enableRotate,minDistance:i.minDistance,maxDistance:i.maxDistance,minPolarAngle:i.minPolarAngle,maxPolarAngle:i.maxPolarAngle,autoRotate:i.autoRotate,autoRotateSpeed:i.autoRotateSpeed}),p&&y.jsx(M.ContactShadows,{position:p.position,opacity:p.opacity,blur:p.blur})]})})}function G({url:e,position:n=[0,0,0],rotation:r=[0,0,0],scale:t=1,onLoad:s,onError:c}){const{scene:u}=M.useGLTF(e),b=a.useMemo(()=>{const m=u.clone(),o=[],i=new Set,f=[];let p=0;return m.traverse(h=>{if(p++,h.type==="Bone"&&f.push(h.name),h.isMesh){const l=h;o.push(l.name),l.castShadow=!0,l.receiveShadow=!0,(Array.isArray(l.material)?l.material:[l.material]).forEach(g=>i.add(g.name))}}),s&&setTimeout(()=>{s({meshes:o.sort(),materials:Array.from(i).sort(),bones:f.sort(),nodeCount:p})},0),m},[u,s]),d=typeof t=="number"?[t,t,t]:t;return y.jsx("group",{position:n,rotation:r,scale:d,children:y.jsx("primitive",{object:b})})}G.preload=e=>{M.useGLTF.preload(e)};function L(e){const n=new Map,r=new Map,t=e.clone();return F(e,t,function(s,c){n.set(c,s),r.set(s,c)}),t.traverse(function(s){if(!s.isSkinnedMesh)return;const c=s,u=n.get(s),b=u.skeleton.bones;c.skeleton=u.skeleton.clone(),c.bindMatrix.copy(u.bindMatrix),c.skeleton.bones=b.map(function(d){return r.get(d)}),c.bind(c.skeleton,c.bindMatrix)}),t}function F(e,n,r){r(e,n);for(let t=0;t<e.children.length;t++)F(e.children[t],n.children[t],r)}function q(e,n,r){const{actions:t,names:s}=M.useAnimations(e,n),c=a.useRef(null),u=a.useRef(r==null?void 0:r.defaultAnimation);a.useEffect(()=>{if(s.length===0)return;const o=u.current;let i=s[0];if(o){const p=s.find(h=>h===o||h.includes(o));p&&(i=p)}const f=t[i];f&&(f.reset().fadeIn(.5).play(),c.current=f)},[t,s]);const b=a.useCallback((o,i)=>{const{loop:f=!1,crossFadeDuration:p=.2,restoreDefault:h=!0}=i||{};let l=t[o];if(!l){const g=Object.keys(t).find(S=>S.toLowerCase().includes(o.toLowerCase())||o.toLowerCase().includes(S.toLowerCase()));g&&(l=t[g])}if(!l){console.warn(`Animation "${o}" not found. Available: ${s.join(", ")}`);return}const x=c.current;if(!(x===l&&l.isRunning())&&(x&&x!==l&&x.fadeOut(p),l.reset(),l.fadeIn(p),l.setLoop(f?w.LoopRepeat:w.LoopOnce,f?1/0:1),l.clampWhenFinished=!f,l.play(),f||l.getMixer().update(0),c.current=l,h&&!f&&u.current)){const g=l.getMixer(),S=j=>{if(j.action===l){g.removeEventListener("finished",S);const A=t[u.current];A&&(l.fadeOut(p),A.reset().fadeIn(p).play(),c.current=A)}};g.addEventListener("finished",S)}},[t,s]),d=a.useCallback(()=>{var o;(o=c.current)==null||o.fadeOut(.2),c.current=null},[]),m=a.useCallback(()=>s,[s]);return{playAnimation:b,stopAnimation:d,getAnimationNames:m,actions:t}}function O(e,n){const r=a.useRef(n||{}),t=a.useRef([]),s=a.useRef([]);a.useEffect(()=>{const d=new Set,m=[];e.traverse(o=>{o instanceof w.Mesh&&o.morphTargetDictionary&&o.morphTargetInfluences&&(m.push(o),Object.keys(o.morphTargetDictionary).forEach(i=>{d.add(i)}))}),t.current=Array.from(d).sort(),s.current=m},[e]),D.useFrame(()=>{const d=r.current;s.current.forEach(m=>{!m.morphTargetDictionary||!m.morphTargetInfluences||Object.entries(d).forEach(([o,i])=>{const f=m.morphTargetDictionary[o];f!==void 0&&(m.morphTargetInfluences[f]=i)})})}),a.useEffect(()=>{n&&(r.current={...n})},[n]);const c=a.useCallback((d,m)=>{r.current[d]=Math.max(0,Math.min(1,m))},[]),u=a.useCallback(()=>t.current,[]),b=a.useCallback(()=>({...r.current}),[]);return{setMorphTarget:c,getMorphTargetNames:u,getMorphTargetValues:b}}const H=a.createContext(null);function J(){const e=a.useContext(H);if(!e)throw new Error("BoneAttachment must be used within an AnimatedModel");return e}const P=a.forwardRef(({url:e,position:n=[0,0,0],rotation:r=[0,0,0],scale:t=1,defaultAnimation:s,morphTargets:c,onLoad:u,onError:b,children:d},m)=>{const o=a.useRef(null),i=a.useRef([]),{scene:f,animations:p}=M.useGLTF(e),h=a.useMemo(()=>L(f),[f]),{playAnimation:l,stopAnimation:x,getAnimationNames:g}=q(p,h,{defaultAnimation:s}),{setMorphTarget:S}=O(h,c);a.useEffect(()=>{if(!h)return;const T=setTimeout(()=>{const C=[],k=[],B=new Set,N=new Set;let I=0;h.traverse(R=>{if(I++,R.type==="Bone"&&C.push(R.name),R.isMesh){const v=R;k.push(v.name),v.castShadow=!0,v.receiveShadow=!0,(Array.isArray(v.material)?v.material:[v.material]).forEach(E=>{B.add(E.name),E.shadowSide=w.DoubleSide}),v.morphTargetDictionary&&Object.keys(v.morphTargetDictionary).forEach(E=>{N.add(E)})}}),i.current=Array.from(N).sort(),u==null||u({meshes:k.sort(),materials:Array.from(B).sort(),bones:C.sort(),nodeCount:I,animations:p.map(R=>R.name),morphTargetNames:i.current})},0);return()=>clearTimeout(T)},[h,p,u]),a.useImperativeHandle(m,()=>({playAnimation:l,stopAnimation:x,getAnimationNames:g,getGroup:()=>o.current,setMorphTarget:S,getMorphTargetNames:()=>i.current}));const j=a.useMemo(()=>({scene:h,getBone:T=>h.getObjectByName(T)||null}),[h]),A=typeof t=="number"?[t,t,t]:t;return y.jsx(H.Provider,{value:j,children:y.jsxs("group",{ref:o,position:n,rotation:r,scale:A,children:[y.jsx("primitive",{object:h}),d]})})});P.displayName="AnimatedModel";P.preload=e=>{M.useGLTF.preload(e)};const Z=a.forwardRef(({url:e,position:n=[0,0,0],rotation:r=[0,0,0],scale:t=1,morphTargets:s,onMorphTargetsFound:c,onLoad:u,onError:b},d)=>{const{scene:m}=M.useGLTF(e),o=a.useMemo(()=>m.clone(),[m]),{setMorphTarget:i,getMorphTargetNames:f,getMorphTargetValues:p}=O(o,s);a.useEffect(()=>{const l=f();l.length>0&&(c==null||c(l))},[o,f,c]),a.useEffect(()=>{if(!o)return;const l=[],x=new Set,g=[];let S=0;o.traverse(j=>{if(S++,j.type==="Bone"&&g.push(j.name),j.isMesh){const A=j;l.push(A.name),A.castShadow=!0,A.receiveShadow=!0,(Array.isArray(A.material)?A.material:[A.material]).forEach(C=>x.add(C.name))}}),u==null||u({meshes:l.sort(),materials:Array.from(x).sort(),bones:g.sort(),nodeCount:S})},[o,u]),a.useImperativeHandle(d,()=>({setMorphTarget:i,getMorphTargetNames:f,getMorphTargetValues:p}));const h=typeof t=="number"?[t,t,t]:t;return y.jsx("group",{position:n,rotation:r,scale:h,children:y.jsx("primitive",{object:o})})});Z.displayName="MorphableModel";function K({children:e,bone:n,position:r=[0,0,0],rotation:t=[0,0,0],scale:s=1}){const{getBone:c}=J(),[u,b]=a.useState(null);if(a.useEffect(()=>{const m=c(n);m?b(m):console.warn(`Bone "${n}" not found in model`)},[n,c]),!u)return null;const d=typeof s=="number"?[s,s,s]:s;return D.createPortal(y.jsx("group",{position:r,rotation:t,scale:d,children:e}),u)}function Q(e,n){const{scene:r,animations:t}=M.useGLTF(e),s=a.useMemo(()=>L(r),[r]);return a.useEffect(()=>{var m;if(!s)return;const c=[],u=[],b=new Set;let d=0;s.traverse(o=>{if(d++,o.type==="Bone"&&c.push(o.name),o.isMesh){const i=o;u.push(i.name),i.castShadow=!0,i.receiveShadow=!0,(Array.isArray(i.material)?i.material:[i.material]).forEach(p=>{b.add(p.name),p.shadowSide=w.DoubleSide})}}),(m=n==null?void 0:n.onLoad)==null||m.call(n,{meshes:u.sort(),materials:Array.from(b).sort(),bones:c.sort(),nodeCount:d})},[s,n]),{scene:s,animations:t}}function U(e){M.useGLTF.preload(e)}exports.AnimatedModel=P;exports.BoneAttachment=K;exports.Model=G;exports.MorphableModel=Z;exports.Scene3D=V;exports.preloadModel=U;exports.useAnimationController=q;exports.useClonedModel=Q;exports.useMorphTargets=O;
+//# sourceMappingURL=mbt-3d.cjs.js.map