@dtux/tws-scene3d

Lightweight 3D device scene viewer for TwinStudio chatbot and dashboards.

Install

npm install @dtux/tws-scene3d
# or
pnpm add @dtux/tws-scene3d

Peer dependencies (install in your app):

npm install react react-dom three @react-three/fiber @react-three/drei

Usage

import { DeviceScenePanel } from "@dtux/tws-scene3d";
import type { DeviceScenePayload } from "@dtux/tws-scene3d";

const payload: DeviceScenePayload = {
  rootEntityId: "asset-1",
  entities: [
    {
      id: "asset-1",
      name: "Device",
      boxSize: { x: 1, y: 1, z: 1 },
    },
  ],
};

export function ScenePreview() {
  return <DeviceScenePanel payload={payload} />;
}

Payload-only entry (no React Three Fiber)

import {
  hasDeviceScenePayload,
  parseDeviceSceneFromTool,
} from "@dtux/tws-scene3d/payload";

Exports

| Export | Description | |--------|-------------| | DeviceScenePanel | Full panel with scene canvas | | SceneEmbedCard | Compact embed for chat | | SceneCanvas / SceneContent | Lower-level scene building blocks | | @dtux/tws-scene3d/payload | Payload parsing without 3D runtime |

Development

pnpm install
pnpm build
pnpm test

License

MIT