科学・技術
オープンソースの3D解剖学エクスプローラー:2,234の選択可能なBodyParts3Dメッシュ
Open-source 3D anatomy explorer: 2,234 selectable BodyParts3D meshes (github.com)
要約
React、Three.js、shadcn/uiで構築されたインタラクティブな3D解剖学エクスプローラー「Human Atlas」を紹介します。成人男性のBodyParts3Dモデルを2,234の選択可能なメッシュに分解し、15の解剖学的システムを探索したり、3,432の名称付き概念を検索したりできます。ローカルでの実行も可能で、教育目的のエクスプローラーとして設計されています。
全文翻訳
Human Atlas は、React、Three.js、および shadcn/ui で構築されたインタラクティブな3D解剖学エクスプローラーです。
BodyParts3D の成人男性参照モデルを、個別に選択可能な2,234のメッシュに分解し、15の解剖学的システムを探索し、3,432の名称付き概念を検索できます。
ライブデモを探索する
オービット、ズーム、および構造体を直接体に沿って選択します。
個々のシステムを切り替えるか、スケルトンと臓器のプリセットを使用します。
組み立てられた解剖学から、見えるすべてのピースのスペース化されたインベントリに移動します。
解剖学的な名前とソース識別子を検索します。
選択した構造体を分離し、その詳細を読みます。
モバイルでコンパクトなコントロールと詳細パネルを使用します。
ローカルで実行する
Node.js 22.13 以降が必要です。
APIキーやアカウントは必要ありません。
npm ci
npm run dev
http://localhost:3016 を開きます。
静的サイトをビルドするには、npm run build を実行します。出力は dist/ にあります。
検証する
npm run check
node scripts/validate-atlas.mjs
node scripts/validate-interactions.mjs
npm run build
検証には、メッシュバッファ、名前と概念のメンバーシップ、デスクトップおよびモバイルのアスペクト比での重なり合わない展開レイアウト、検索と検査の契約、およびタップ対ドラッグの処理が含まれます。
ブラウザのインタラクションチェックでは、選択、システムコントロール、検索、分離、回転、および390×844、320×568、844×390のレイアウトがテストされました。
電話のコントロールは、展開されたインベントリから離れており、分離された構造体は、詳細パネルの上または横のスペースに収まります。
物理デバイスのパフォーマンスと実際のマルチタッチハードウェアはテストされていません。
解剖学データ
現在のビューアは、CC BY 4.0ライセンスの成人男性参照解剖学である BodyParts3D 4.0 を使用しています。
これは、すべての人間の構造やバリエーションを表すものではありません。
個々のソースメッシュは、複数のメッシュをグループ化する可能性のある名称付き概念とは区別されます。
説明では、一般的なシステムコンテキストと個々の臓器の説明を区別しています。
ブラウザのパフォーマンスのためにジオメトリは簡略化されていますが、すべてのソースメッシュは保持されています。
パッケージ化されたモデルには2,288,268個の三角形が含まれており、約33MBの圧縮ジオメトリをダウンロードします。
完全なクレジット、ソースリンク、および適応の詳細は ATTRIBUTION.md にあります。
これは教育用エクスプローラーであり、診断または外科用ツールではありません。
仕組み
ジオメトリはバッチにマージされます。
構造体ごとのGPUテクスチャが、変換、可視性、および選択を制御し、コンポーネントジオメトリが正確なピッキングをサポートします。
展開レイアウトは、表示されているピースのみをパックします。
シーンが変更されるとレンダリングが更新されます。オービットコントロールは、数千もの個別の描画呼び出しなしで応答性を維持します。
オプションの WebMCP ツールは、互換性のあるブラウザで解剖学の検索と検査を公開します。
表示されるインターフェイスは、それなしでも機能します。
ジオメトリの再構築
リポジトリには、ブラウザ対応のジオメトリが含まれています。
それを再構築することはオプションです。
公式の BodyParts3D OBJ アーカイブと英語のメタデータテーブルを取得し、結合された概念と表示システムのマッピングを準備し、scripts/convert-anatomy.py を実行してから、node scripts/optimize-anatomy.mjs および node scripts/compress-models.mjs を実行します。
簡略化では、構造体ごとに0.2%の相対誤差制限を使用します。
デプロイ
このリポジトリを Vite プロジェクトとして Vercel にインポートします。
含まれている vercel.json は、npm ci、npm run build、および dist 出力ディレクトリを構成します。
静的ホストで提供することもできます。
ライセンス
元のアプリケーションコードは MIT ライセンスの下でリリースされています。
解剖学データには独自の CC BY 4.0 ライセンスがあります。再配布する際は、帰属表示を保持してください。
サードパーティの依存関係は、それぞれのライセンスを保持します。
問題とプルリクエストを歓迎します。
インタラクションの問題については、再現手順とブラウザ/デバイスの詳細を含めてください。