# Plot 3D

A 3D viewer on a plain 2D canvas with its own perspective projection and painter's algorithm, so it needs no three.js. Drag to orbit, scroll or pinch to zoom.

Scenes come from `@indoku/science` (`moleculeScene`, `pipeFlowScene`, `dnaScene`, `surfaceScene`, ...) or from any object matching `Scene3DLike`.

Group: Science

## Import

```tsx
import { Plot3D } from "@indoku/ui"
import { moleculeScene } from "@indoku/science"
```

## Examples

### Molecule

Pick a molecule; atoms and bonds are generated for you.

```tsx
function Plot3DMolecule() {
  const [name, setName] = useState("H2O")
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <select value={name} onChange={(e) => setName(e.target.value)}>
        {MOLECULE_NAMES.map((n) => (
          <option key={n}>{n}</option>
        ))}
      </select>
      <Plot3D scene={moleculeScene(name)} autoRotate />
    </div>
  )
}
```

### Pipe flow

Tracers speed up in the narrow section: A₁v₁ = A₂v₂.

```tsx
function Plot3DPipe() {
  return <Plot3D scene={pipeFlowScene({ radius: 1, throatRadius: 0.5 })} />
}
```

### DNA helix

```tsx
function Plot3DDna() {
  return <Plot3D scene={dnaScene()} height={420} autoRotate />
}
```

## Props

### Plot3D

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scene` * | `Scene3DLike` |  |  |
| `t` | `number` |  | Controlled time (seconds). Omit to let the component animate itself. |
| `controls` | `boolean` |  | Show play/pause/scrubber when the scene is animated. Default true. |
| `height` | `number` |  | Canvas height in px. Default 360. |
| `autoRotate` | `boolean` |  | Slowly orbit the camera. Default false. |
| `renderLatex` | `(latex: string) => ReactNode` |  | Render scene.latex strings (e.g. with KaTeX). Omit to hide them. |

`*` = required. Style props and HTML attributes are accepted too.

## Notes

- Fine for a few thousand primitives. Pass `t` to control time yourself, or `controls={false}` to hide the play bar.

## See also

- Plot 2D: https://ui.indoku.org/docs/plot-2d
- Player: https://ui.indoku.org/docs/player