무료 인터랙티브 3D 치아 해부학: 32영구치 전체, 번호 체계, 법랑층부터 뿌리관, 턱·신경 포함 교육 도구
원문 보기
Free interactive 3D dental anatomy: all 32 permanent teeth with FDI, Universal and Palmer numbers, enamel to root canals, jaws and nerves. Educational tool.
Dental Scope is an open-source, interactive 3D dental anatomy explorer. Start with the whole mouth (jaws, gingiva, the complete permanent dentition, nerves and the temporomandibular joints) and move all the way down to the enamel, dentin, pulp chamber and root canals of a single tooth.
Educational anatomical reference. Not intended for diagnosis or treatment.
Inside a tooth
Cross-section through the arch
Dissected anatomy
Features
Mouth → jaw → dentition → tooth → tissue. One continuous scene; no separate "tooth viewer".
All 32 permanent teeth, individually selectable, named anatomically, with FDI, Universal and Palmer numbering (switchable).
Inside every tooth: enamel, coronal and radicular dentin, cementum, periodontal ligament, pulp chamber with pulp horns, and one canal per root in its most common configuration (e.g. MB2 in maxillary first molars, two mesial canals in mandibular first molars). Five dissection levels peel the tooth layer by layer.
Dissection at two levels: the whole mouth (Dissect anatomy: jaws apart, gum and teeth lifted off in clean tiers, bone see-through so the nerves and vessels stay where they run) and a single tooth (Separate layers: enamel shell, dentin, pulp and canals apart).
Cross-sections: sagittal, coronal, axial or view-aligned planes; inside a tooth they switch to mesiodistal, buccolingual and horizontal. Cut surfaces render as solid tissue, so enamel thickness, dentin and pulp read clearly, across all 32 teeth at once.
Search by name, tooth number in any system (11, #8, UR6, fdi 36), tissue, synonym (gums, wisdom tooth, IAN, cuspid).
Layers for 19 dental categories with show, show-only, translucent and hide; plus hide/ghost/isolate per structure and a full hierarchy tree.
Premium camera: arcing focus transitions, bounding-box framing, eight view presets including occlusal views, optical centre that stays clear of panels.
Labels that anchor to anatomy, declutter by priority, hide when occluded or too small, and select on click.
Deep links:/tooth/36, /tooth/36/dissect, /structure/inferior-alveolar-nerve-left.
Shareable credits popup:/credits/ opens the credits over the 3D explorer. Translated links are /credits/sv/, /credits/de/, /credits/es/ and /credits/la/; relative-base builds use #/credits/.
English, Swedish, German, Spanish and Latin: switch with the flags at the top (Latin has no country, so it gets a Roman SPQR vexillum). Everything is translated by hand, including anatomical names, descriptions, search terms and the about page (/about/sv/, /about/de/, /about/es/, /about/la/). Add ?lang=sv, de, es or la to a link to open it in that language. Latin uses Terminologia Anatomica names and a Neo-Latin interface. Translations live in src/i18n/ and src/content/<lang>/.
Honest data: every structure shows whether it is source, derived, modeled, atlas or schematic geometry; all text shows its review status.
Responsive (bottom sheets on phones), keyboard-accessible (tree view, shortcuts, focus rings), reduced-motion aware, light and dark themes.
Fast: ≈2.3 MB of geometry for first paint, the rest streams in; ≈367 KB per tooth's internal anatomy on average, loaded on demand; render-on-demand loop.
The dental feedback additions include nerve passage views, a Nerves & muscles transparency preset, sourced canal-count tables for every permanent tooth type, additional cranial nerves and an illustrative TMJ opening control. Scope, sources and the server review checklist are in docs/feedback-anatomy.md.
npm test # unit tests (Vitest)
npm run typecheck
npm run typecheck:tests # TypeScript checks for tests and Vite config
npm run lint # ESLint (type-aware rules on src/**)
npm run build # static site in dist/ (includes a 404.html SPA fallback)
npx playwright install chromium # once, for browser tests
npm run test:e2e # desktop and phone flows against the production build
Browser regressions cover selection/dissection Back and Forward, search focus and dismissal, layer scrolling, primary dentition, mobile reading trays, failed-download retry and credits links. CI installs Chromium and runs these after the production build; failed runs retain traces and screenshots in test-results/.
The built site is fully static. For a sub-path deployment set DS_BASE, e.g. DS_BASE=/dental-scope/ npm run build; with a relative base (DS_BASE=./) deep links switch to hash URLs (#/tooth/36) so the build works from any folder. Set VITE_DS_REPO_URL to link the “Made by Yoseph” credit and the About dialog to the repository; when it is unset the credit is plain text, so a build never advertises a private repository. The live site is deployed by Vercel from main; set VITE_DS_REPO_URL and DS_SITE_URL in the Vercel project's environment variables.
Set DS_SITE_URL to the public address of the deployment (e.g. https://user.github.io/dental-scope/) to add canonical URLs, social-preview tags with og-image.png, structured data and sitemap.xml. On Vercel, set it in the project's environment variables. Every build also writes robots.txt and a static entry page per tooth (tooth/36/) so those deep links return their own title and description instead of the 404 fallback. Crawlers only read robots.txt at the domain root, so for a project site under a sub-path submit sitemap.xml in the search engine's webmaster tools instead.
Every build also writes a text-first guide page for every tooth and structure in all five languages: English at the root (teeth/36-mandibular-left-first-molar/), the others under sv/, de/, es/ and la/ with translated slugs (sv/tander/36-vanster-forsta-molar-i-underkaken/). A guide page stays noindex until its own text reaches 150 words (MIN_INDEX_WORDS in src/app/guide.ts); only indexable pages go into sitemap.xml, with hreflang links between their language versions. Once a tooth's English guide page is indexable, the matching explorer entry page (tooth/36/) leaves the index so the two don't compete. Vercel preview deployments (or any build with DS_PREVIEW=1) are noindex everywhere and robots.txt blocks all crawlers.
Keyboard
/ search · Esc clear / leave tooth · F focus · I isolate · H hide · G ghost · D inside tooth · [] dissection level · E dissect anatomy / separate tooth layers · C section · L labels · arrows orbit · +− zoom · R reset
Architecture
src/
app/ routing, search/sharing metadata, repository link
anatomy/ structure registry, tooth tables, notation ← anatomy is data
content/ educational text (JSON) + resolver
search/ index + scorer
state/ Zustand store, pure visibility resolver
engine/ Three.js engine: loading, materials, picking, camera, explode, section, labels
ui/ React panels (no per-frame rendering)
modes/ Explore + Quiz (learn/compare still scaffolds)
tools/pipeline/ BodyParts3D → production GLB
React renders the chrome; the engine owns Three.js and subscribes to the store. Nothing re-renders React per frame.
One pure function decides every mesh's visibility (categories, hide/ghost, isolation, dissection level, section) and accepts extra filters: the hook for future timeline and procedure modes.
Loading is staged: jaws & teeth → skull & muscles → nerves & vessels → a tooth's internals on demand.
Atlas nerve and vessel paths (Z-Anatomy, CC BY-SA 4.0)
CBCT-derived canals where licences allow
Primary dentition and an eruption timeline (schematic mixed-dentition stages; expert review pending)
Quiz mode: identify all 32 permanent teeth on the separated board (shuffled positions, hints, show answer, answer-safe surface and section inspection, score)
