myroom-react-private/dist/index.d.ts

React components for MyRoom 3D scene integration with Babylon.js

import * as react from 'react';
import react__default from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Scene, TransformNode, ShadowGenerator, UtilityLayerRenderer, Mesh, ArcRotateCamera, Vector3, Camera } from '@babylonjs/core';

interface ActiveMovement {
    forward: boolean;
    backward: boolean;
    left: boolean;
    right: boolean;
    turnLeft: boolean;
    turnRight: boolean;
    jump: boolean;
    run: boolean;
    wave: boolean;
    dance: boolean;
}
interface TouchMovement {
    x: number;
    y: number;
    isMoving: boolean;
    durationBoost?: number;
}
interface PartItem {
    name: string;
    fileName: string | null;
}
interface GenderSelectableParts {
    hair: PartItem[];
    top: PartItem[];
    bottom?: PartItem[];
    shoes?: PartItem[];
    accessory?: PartItem[];
    fullset?: PartItem[];
}
interface GenderFixedParts {
    body: string;
}
interface GenderDefaultColors {
    hair?: string;
    top?: string;
    bottom?: string;
    shoes?: string;
    accessory?: string;
    fullset?: string;
    [key: string]: string | undefined;
}
interface GenderData {
    fixedParts: GenderFixedParts;
    selectableParts: GenderSelectableParts;
    defaultColors: GenderDefaultColors;
}
interface AvailableParts {
    male: GenderData;
    female: GenderData;
}
interface AvatarPartPaths {
    body: string;
    hair: string | null;
    top: string | null;
    bottom?: string | null;
    shoes?: string | null;
    accessory?: string | null;
    [key: string]: string | null | undefined;
}
interface AvatarColors {
    hair?: string;
    top?: string;
    bottom?: string;
    shoes?: string;
    accessory?: string;
    [key: string]: string | undefined;
}
type Gender = keyof AvailableParts;
interface AvatarConfig {
    gender: Gender;
    parts: AvatarPartPaths;
    colors: AvatarColors;
}

interface LoadedItem {
    id: string;
    name: string;
    path: string;
    position: {
        x: number;
        y: number;
        z: number;
    };
    rotation?: {
        x: number;
        y: number;
        z: number;
    };
    scale?: {
        x: number;
        y: number;
        z: number;
    };
}

interface IntegratedSceneProps {
    roomPath?: string;
    avatarConfig?: AvatarConfig;
    activeMovement?: ActiveMovement;
    touchMovement?: TouchMovement;
    loadedItems?: LoadedItem[];
    onSceneReady?: (scene: any) => void;
    gizmoMode?: 'position' | 'rotation' | 'scale';
    onGizmoModeChange?: (mode: 'position' | 'rotation' | 'scale') => void;
    selectedItem?: any;
    onSelectItem?: (item: any) => void;
    onItemTransformChange?: (itemId: string, transform: {
        position: {
            x: number;
            y: number;
            z: number;
        };
        rotation: {
            x: number;
            y: number;
            z: number;
        };
        scale: {
            x: number;
            y: number;
            z: number;
        };
    }) => void;
    onToggleUIOverlay?: () => void;
}
interface IntegratedSceneRef {
    resetCamera: () => void;
}
declare const IntegratedBabylonScene: react.ForwardRefExoticComponent<IntegratedSceneProps & react.RefAttributes<IntegratedSceneRef>>;

declare function BabylonScene(): react_jsx_runtime.JSX.Element;

declare function InteractiveRoom(): react_jsx_runtime.JSX.Element;

interface ItemLoaderProps {
    scene: Scene | null;
    loadedItems?: LoadedItem[];
    isSceneReady: boolean;
    itemsRef: React.MutableRefObject<TransformNode | null>;
    loadedItemMeshesRef: React.MutableRefObject<any[]>;
    shadowGeneratorRef: React.MutableRefObject<ShadowGenerator | null>;
}
declare const useItemLoader: ({ scene, loadedItems, isSceneReady, itemsRef, loadedItemMeshesRef, shadowGeneratorRef }: ItemLoaderProps) => void;

interface ItemManipulatorProps {
    gizmoMode?: 'position' | 'rotation' | 'scale';
    selectedItem?: any;
    utilityLayerRef: React.MutableRefObject<UtilityLayerRenderer | null>;
    onItemTransformChange?: (itemId: string, transform: {
        position: {
            x: number;
            y: number;
            z: number;
        };
        rotation: {
            x: number;
            y: number;
            z: number;
        };
        scale: {
            x: number;
            y: number;
            z: number;
        };
    }) => void;
    onSelectItem?: (item: any) => void;
    loadedItemMeshesRef: React.MutableRefObject<any[]>;
    highlightDiscRef: React.MutableRefObject<Mesh | null>;
}
declare const useItemManipulator: ({ gizmoMode, selectedItem, utilityLayerRef, onItemTransformChange, onSelectItem, loadedItemMeshesRef, highlightDiscRef }: ItemManipulatorProps) => {
    selectItem: (mesh: any) => void;
    deselectItem: () => void;
    updateGizmo: (mesh: any) => void;
    updateItemTransform: (itemId: string, mesh: any, immediate?: boolean) => void;
};

interface RoomLoaderProps {
    scene: Scene | null;
    roomPath?: string;
    isSceneReady: boolean;
    roomRef: react__default.MutableRefObject<TransformNode | null>;
}
declare const useRoomLoader: ({ scene, roomPath, isSceneReady, roomRef }: RoomLoaderProps) => void;

interface ItemManipulationControlsProps {
    gizmoMode?: 'position' | 'rotation' | 'scale';
    onGizmoModeChange?: (mode: 'position' | 'rotation' | 'scale') => void;
}
declare const ItemManipulationControls: react__default.FC<ItemManipulationControlsProps>;

interface SceneControlButtonsProps {
    onReset: () => void;
    onToggleFullscreen: () => void;
    onToggleUIOverlay: () => void;
    isFullscreen: boolean;
}
declare const SceneControlButtons: react__default.FC<SceneControlButtonsProps>;

interface UseAvatarLoaderProps {
    sceneRef: React.MutableRefObject<any>;
    avatarConfig?: AvatarConfig;
    domainConfig: any;
    idleAnimRef: React.MutableRefObject<any>;
    walkAnimRef: React.MutableRefObject<any>;
    currentAnimRef: React.MutableRefObject<any>;
    allIdleAnimationsRef: React.MutableRefObject<any[]>;
    allWalkAnimationsRef: React.MutableRefObject<any[]>;
    allCurrentAnimationsRef: React.MutableRefObject<any[]>;
    avatarRef: React.MutableRefObject<any>;
    shadowGeneratorRef: React.MutableRefObject<any>;
}
declare const useAvatarLoader: ({ sceneRef, avatarConfig, domainConfig, idleAnimRef, walkAnimRef, currentAnimRef, allIdleAnimationsRef, allWalkAnimationsRef, allCurrentAnimationsRef, avatarRef, shadowGeneratorRef }: UseAvatarLoaderProps) => {
    isAnimationReady: boolean;
    loadedAvatarPartsRef: react.MutableRefObject<Record<string, any[]>>;
};

interface UseAvatarMovementProps {
    sceneRef: React.MutableRefObject<Scene | null>;
    cameraRef: React.MutableRefObject<ArcRotateCamera | null>;
    avatarRef: React.MutableRefObject<TransformNode | null>;
    touchMovement?: TouchMovement;
    isSceneReady: boolean;
    idleAnimRef: React.MutableRefObject<any>;
    walkAnimRef: React.MutableRefObject<any>;
    currentAnimRef: React.MutableRefObject<any>;
    allIdleAnimationsRef: React.MutableRefObject<any[]>;
    allWalkAnimationsRef: React.MutableRefObject<any[]>;
    allCurrentAnimationsRef: React.MutableRefObject<any[]>;
    AVATAR_BOUNDARY_LIMIT?: number;
    CAMERA_TARGET_HEAD_OFFSET?: number;
}
declare function useAvatarMovement({ sceneRef, cameraRef, avatarRef, touchMovement, isSceneReady, idleAnimRef, walkAnimRef, currentAnimRef, allIdleAnimationsRef, allWalkAnimationsRef, allCurrentAnimationsRef, AVATAR_BOUNDARY_LIMIT, CAMERA_TARGET_HEAD_OFFSET }: UseAvatarMovementProps): {
    avatarMovementStateRef: react.MutableRefObject<{
        isMoving: boolean;
        targetPosition: Vector3 | null;
        startPosition: Vector3 | null;
        animationProgress: number;
        movementSpeed: number;
        totalDistance: number;
        targetRotation: number;
        startRotation: number;
        shouldRotate: boolean;
    }>;
    cameraFollowStateRef: react.MutableRefObject<{
        currentTarget: Vector3;
        dampingFactor: number;
        shouldFollowAvatar: boolean;
    }>;
    isRightMouseDownRef: react.MutableRefObject<boolean>;
    animationBlendingRef: react.MutableRefObject<{
        isBlending: boolean;
        blendDuration: number;
        blendProgress: number;
        fromAnimations: any[];
        toAnimations: any[];
        startTime: number;
    }>;
    avatarMovementObserverRef: react.MutableRefObject<any>;
    moveAvatarToPosition: (targetPosition: Vector3, targetDisc: Mesh) => void;
    resetAvatarMovement: () => void;
    AVATAR_BOUNDARY_LIMIT: number;
    CAMERA_TARGET_HEAD_OFFSET: number;
};

interface UseSkyboxProps {
    scene: Scene | null;
    isSceneReady: boolean;
}
/**
 * Hook để tạo và quản lý skybox với shader tùy chỉnh
 */
declare const useSkybox: ({ scene, isSceneReady }: UseSkyboxProps) => void;

interface UsePostProcessingProps {
    scene: Scene | null;
    camera: Camera | null;
    isSceneReady: boolean;
    options?: {
        enableFXAA?: boolean;
        enableMSAA?: boolean;
        enableBloom?: boolean;
        bloomIntensity?: number;
        bloomThreshold?: number;
        enableDOF?: boolean;
        enableSSAO?: boolean;
        enableImageProcessing?: boolean;
        contrast?: number;
        exposure?: number;
    };
}
/**
 * Hook để quản lý các hiệu ứng hậu xử lý (post-processing) trong Babylon.js
 */
declare const usePostProcessing: ({ scene, camera, isSceneReady, options }: UsePostProcessingProps) => void;

declare global {
    interface Window {
        MYROOM_CONFIG?: {
            baseDomain?: string;
            [key: string]: any;
        };
    }
}
declare const domainConfig: {
    baseDomain: string;
    paths: {
        webComponent: string;
        embedHtml: string;
        models: {
            rooms: string;
            items: string;
            avatars: string;
        };
    };
};

declare const availablePartsData: AvailableParts;

declare const skeletonMapping: {
    [key: string]: string | null;
};

export { type ActiveMovement, type AvatarConfig, BabylonScene, IntegratedBabylonScene, InteractiveRoom, useItemLoader as ItemLoader, ItemManipulationControls, useItemManipulator as ItemManipulator, type LoadedItem, useRoomLoader as RoomLoader, SceneControlButtons, type TouchMovement, availablePartsData as avatarPartsData, domainConfig, skeletonMapping, useAvatarLoader, useAvatarMovement, usePostProcessing, useSkybox };