# @nice2dev/ui-3d

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

[![npm](https://img.shields.io/npm/v/@nice2dev/ui-3d)](https://www.npmjs.com/package/@nice2dev/ui-3d)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

---

## 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

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

## Quick start

```tsx
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

```tsx
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

```tsx
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

```bash
npm install
npm run build
```

## License

MIT © NiceToDev
