@nice2dev/ui-3d

Blender-style 3D model editor component for React, powered by Three.js.

Features

• Full 3D scene editing (translate / rotate / scale)
• Load FBX, GLB/GLTF, OBJ, DAE, STL, PLY and more
• Animation playback with mixer
• Scene tree, properties panel, timeline
• Optional AI pose-from-video (onAIPoseVideo prop)
• Zero external dependencies — pure React + Three.js library

Installation

npm install @nice2dev/ui-3d three
# peer deps: react, react-dom

Quick start

import { ModelEditor } from '@nice2dev/ui-3d';
import '@nice2dev/ui-3d/style.css';

function App() {
  return (
    <ModelEditor
      onSaveToLibrary={(dataUrl, name, mimeType) => console.log('save', name)}
    />
  );
}

With AI pose-from-video

import { ModelEditor, type Pose3DSequenceResult } from '@nice2dev/ui-3d';

async function myAiPose(file: File): Promise<Pose3DSequenceResult> {
  const form = new FormData();
  form.append('video', file);
  const res = await fetch('/api/pose3d', { method: 'POST', body: form });
  return res.json();
}

<ModelEditor onAIPoseVideo={myAiPose} />

With i18n

import { ModelEditor, NiceI18nProvider } from '@nice2dev/ui-3d';
import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  return (
    <NiceI18nProvider t={(key, fallback) => t(key, fallback)}>
      <ModelEditor />
    </NiceI18nProvider>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | — | CSS class added to root element | | onSaveToLibrary | (dataUrl, name, mimeType) => void | — | Called when user saves render | | onAIPoseVideo | (file: File) => Promise<Pose3DSequenceResult> | — | AI pose callback; button hidden if omitted |

Build

npm install
npm run build

License

MIT © NiceToDev