3d-odontogram 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -2
- package/dist/index.cjs +601 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +145 -0
- package/dist/index.d.ts +145 -0
- package/dist/index.js +567 -0
- package/dist/index.js.map +1 -0
- package/package.json +56 -4
package/README.md
CHANGED
|
@@ -1,3 +1,119 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 3d-odontogram
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Customizable React + Three.js 3D odontogram (dental chart). Click a tooth to mark/unmark a
|
|
4
|
+
diagnostic point; every color — tooth, highlight, marker, canvas background, lights — is
|
|
5
|
+
themeable via props, and each instance owns its own Three.js scene so you can mount more than
|
|
6
|
+
one on the same page.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install 3d-odontogram three react react-dom
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
`react`, `react-dom` and `three` are peer dependencies — install them in the consuming app.
|
|
15
|
+
|
|
16
|
+
## Basic usage
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import { Odontogram3D } from "3d-odontogram";
|
|
20
|
+
|
|
21
|
+
export default function Page() {
|
|
22
|
+
return (
|
|
23
|
+
<div style={{ width: "100%", height: 600 }}>
|
|
24
|
+
<Odontogram3D toothType="adult" />
|
|
25
|
+
</div>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
The component renders a `<canvas>` that fills its parent — size it with a container `div`.
|
|
31
|
+
|
|
32
|
+
## Customizing colors (theme)
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<Odontogram3D
|
|
36
|
+
toothType="adult"
|
|
37
|
+
theme={{
|
|
38
|
+
toothColor: "#fdf6e3", // default tooth color
|
|
39
|
+
highlightColor: "#e11d48", // color applied when a tooth has a diagnostic point
|
|
40
|
+
markerColor: "#111827", // marker sphere color
|
|
41
|
+
canvasBackground: "#0f172a",
|
|
42
|
+
canvasBackgroundOpacity: 1, // 0 = transparent canvas, 1 = opaque background
|
|
43
|
+
ambientLightColor: "#ffffff",
|
|
44
|
+
ambientLightIntensity: 0.9,
|
|
45
|
+
}}
|
|
46
|
+
/>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Colors accept a hex number (`0xff0000`) or any CSS color string (`"#ff0000"`, `"red"`).
|
|
50
|
+
Changing the `theme` prop after mount re-applies it live — no reload of the 3D model.
|
|
51
|
+
|
|
52
|
+
## Pointing at your own model files
|
|
53
|
+
|
|
54
|
+
By default the component expects `ip1.bin.gz` (child) / `ip3.bin.gz` (adult) under
|
|
55
|
+
`/assets/bin/` in the consuming app's public folder. Override the base path and/or file names:
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
<Odontogram3D
|
|
59
|
+
toothType="child"
|
|
60
|
+
modelBaseUrl="/odontogram-assets"
|
|
61
|
+
modelFileNames={{ child: "child-model.bin.gz", adult: "adult-model.bin.gz" }}
|
|
62
|
+
/>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Reading and controlling diagnostic points
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { useRef } from "react";
|
|
69
|
+
import { Odontogram3D, type Odontogram3DHandle, type MappedPoint } from "3d-odontogram";
|
|
70
|
+
|
|
71
|
+
function Example() {
|
|
72
|
+
const handleRef = useRef<Odontogram3DHandle>(null);
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<Odontogram3D
|
|
76
|
+
ref={handleRef}
|
|
77
|
+
onPointsChange={(points: MappedPoint[]) => console.log(points)}
|
|
78
|
+
onLoadingChange={(loading) => console.log("loading:", loading)}
|
|
79
|
+
/>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Elsewhere, using the ref:
|
|
84
|
+
handleRef.current?.resetMapping();
|
|
85
|
+
handleRef.current?.getMappedPoints();
|
|
86
|
+
handleRef.current?.setMappedPoints(importedPoints); // e.g. after importing a JSON file
|
|
87
|
+
handleRef.current?.applyTheme({ highlightColor: "#22c55e" });
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Props reference
|
|
91
|
+
|
|
92
|
+
| Prop | Type | Default | Description |
|
|
93
|
+
| --- | --- | --- | --- |
|
|
94
|
+
| `toothType` | `"child" \| "adult"` | `"child"` | 20-tooth or 32-tooth model. |
|
|
95
|
+
| `theme` | `OdontogramTheme` | see below | Colors for tooth/highlight/marker/background/lights. |
|
|
96
|
+
| `modelBaseUrl` | `string` | `"/assets/bin"` | Base path for the `.bin.gz` model files. |
|
|
97
|
+
| `modelFileNames` | `{ child?: string; adult?: string }` | `{ child: "ip1.bin.gz", adult: "ip3.bin.gz" }` | File names per tooth type. |
|
|
98
|
+
| `initialPoints` | `MappedPoint[]` | — | Points to render as soon as the model loads. |
|
|
99
|
+
| `onPointsChange` | `(points: MappedPoint[]) => void` | — | Called whenever points are added/removed/replaced. |
|
|
100
|
+
| `onLoadingChange` | `(loading: boolean) => void` | — | Called when the model starts/finishes loading. |
|
|
101
|
+
| `minDistance` / `maxDistance` | `number` | `100` / `130` | Orbit camera zoom limits. |
|
|
102
|
+
| `className` / `style` | — | — | Passed through to the `<canvas>`. |
|
|
103
|
+
|
|
104
|
+
### `OdontogramTheme` defaults
|
|
105
|
+
|
|
106
|
+
| Key | Default |
|
|
107
|
+
| --- | --- |
|
|
108
|
+
| `toothColor` | `0xf5f5dc` (ivory) |
|
|
109
|
+
| `highlightColor` | `0x3b82f6` (blue) |
|
|
110
|
+
| `markerColor` | `0xff0000` (red) |
|
|
111
|
+
| `canvasBackground` | `0xecf0f1` |
|
|
112
|
+
| `canvasBackgroundOpacity` | `0` |
|
|
113
|
+
| `ambientLightColor` / `ambientLightIntensity` | `0xffffff` / `0.8` |
|
|
114
|
+
| `keyLightColor` / `keyLightIntensity` | `0xffffff` / `0.6` |
|
|
115
|
+
| `fillLightColor` / `fillLightIntensity` | `0xffffff` / `0.4` |
|
|
116
|
+
|
|
117
|
+
## License
|
|
118
|
+
|
|
119
|
+
MIT
|