myroom-react

MyRoom React Component

A React component wrapper for the MyRoom 3D scene system, providing an easy-to-use interface for integrating 3D avatar and room management into React applications.

Features

• 🎮 3D Scene Management: Full Babylon.js 3D scene with avatar and room support
• 👤 Avatar System: Customizable avatars with gender, parts, and colors
• 🏠 Room Management: Load and manage 3D rooms and furniture items
• 🎯 Interactive Controls: Camera controls, item selection, and manipulation
• 📱 Responsive Design: Works on desktop and mobile devices
• 🔧 TypeScript Support: Full TypeScript definitions included

Installation

npm install myroom-react

Quick Start

import React from 'react';
import { MyRoomScene } from 'myroom-react';

function App() {
  return (
    <MyRoomScene
      roomPath="/models/rooms/cate001/MR_KHROOM_0001.glb"
      gender="male"
      width="100%"
      height="600px"
      onSceneReady={(scene) => console.log('Scene ready:', scene)}
    />
  );
}

Props

Basic Props

Prop	Type	Default	Description
roomPath	string	"/models/rooms/cate001/MR_KHROOM_0001.glb"	Path to the 3D room model
gender	'male' | 'female'	'female'	Avatar gender
width	string	'800px'	Component width
height	string	'600px'	Component height
autoplay	boolean	false	Auto-start animations

Avatar Configuration

Prop	Type	Default	Description
avatarConfig	AvatarConfig	Auto-generated	Complete avatar configuration
enableControls	boolean	true	Enable UI controls
cameraControls	boolean	true	Enable camera controls

Items Management

Prop	Type	Default	Description
loadedItems	LoadedItem[]	[]	Array of items to load in the scene
gizmoMode	'position' | 'rotation' | 'scale'	'position'	Current gizmo mode for item manipulation

Event Handlers

Prop	Type	Description
onSceneReady	(scene: Scene, engine: Engine) => void	Called when the 3D scene is ready
onAvatarChanged	(config: AvatarConfig) => void	Called when avatar configuration changes
onItemSelected	(item: any) => void	Called when an item is selected
onCameraMoved	(position: any, target: any) => void	Called when camera moves
onError	(error: any) => void	Called when an error occurs

Advanced Usage

Custom Avatar Configuration

import { AvatarConfig } from 'myroom-react';

const customAvatarConfig: AvatarConfig = {
  gender: 'female',
  parts: {
    body: '/models/female/female_body/female_body.glb',
    hair: '/models/female/female_hair/female_hair_001.glb',
    top: '/models/female/female_top/female_top_001.glb',
    bottom: '/models/female/female_bottom/female_bottom_001.glb',
    shoes: '/models/female/female_shoes/female_shoes_001.glb'
  },
  colors: {
    hair: '#8B4513',
    top: '#FF6B6B',
    bottom: '#4ECDC4',
    shoes: '#45B7D1'
  }
};

<MyRoomScene
  avatarConfig={customAvatarConfig}
  roomPath="/models/rooms/cate001/MR_KHROOM_0001.glb"
/>

Loading Items

import { LoadedItem } from 'myroom-react';

const items: LoadedItem[] = [
  {
    id: 'chair-1',
    name: 'Comfortable Chair',
    path: '/models/items/catelv1_01/catelv2_01/catelv3_01/MR_CHAIR_0001.glb',
    position: { x: 0, y: 0, z: 2 },
    rotation: { x: 0, y: Math.PI / 4, z: 0 },
    scale: { x: 1, y: 1, z: 1 }
  }
];

<MyRoomScene
  loadedItems={items}
  onItemSelected={(item) => console.log('Selected:', item)}
/>

Using the Component Ref

import React, { useRef } from 'react';
import { MyRoomScene, MyRoomSceneRef } from 'myroom-react';

function App() {
  const sceneRef = useRef<MyRoomSceneRef>(null);

  const handleResetCamera = () => {
    sceneRef.current?.resetCamera();
  };

  const handleChangeAvatar = async (config: AvatarConfig) => {
    await sceneRef.current?.changeAvatar(config);
  };

  return (
    <div>
      <button onClick={handleResetCamera}>Reset Camera</button>
      <MyRoomScene
        ref={sceneRef}
        roomPath="/models/rooms/cate001/MR_KHROOM_0001.glb"
        onSceneReady={(scene) => console.log('Scene ready')}
      />
    </div>
  );
}

Available Rooms

• Living Room: /models/rooms/cate001/MR_KHROOM_0001.glb
• Exercise Room: /models/rooms/cate001/MR_KHROOM_0002.glb
• Lounge Room: /models/rooms/cate002/MR_KHROOM_0003.glb

Available Items

• Chair: /models/items/catelv1_01/catelv2_01/catelv3_01/MR_CHAIR_0001.glb
• Light Stand: /models/items/catelv1_01/catelv2_01/catelv3_02/MR_LIGHTSTAND_0002.glb
• Board: /models/items/catelv1_02/catelv2_02/catelv3_02/MR_KH_BOARD_0001.glb
• Mirror: /models/items/catelv1_02/catelv2_03/catelv3_02/MR_MIRROR_0001.glb

Styling

The component uses CSS modules for styling. You can customize the appearance by overriding CSS classes:

.myroom-scene {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.myroom-scene canvas {
  border-radius: 8px;
}

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

License

MIT License - see LICENSE file for details.