Science
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.
Import
tsx
import { Plot3D } from "@indoku/ui"import { moleculeScene } from "@indoku/science"Examples
Molecule
Pick a molecule; atoms and bonds are generated for you.
0.00 / 12.00 s
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₂.
0.00 / 4.77 s
tsx
function Plot3DPipe() { return <Plot3D scene={pipeFlowScene({ radius: 1, throatRadius: 0.5 })} />}DNA helix
Length 25 bpGC 56 %Turns 2.5Height 8.5 nm
0.00 / 10.00 s
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 as well.
Notes
- Fine for a few thousand primitives. Pass
tto control time yourself, orcontrols={false}to hide the play bar.
Created by @indokudev