HN 日本語サマリー

← 一覧へ戻る
科学・技術

オープンソースの3D解剖学エクスプローラー：2,234の選択可能なBodyParts3Dメッシュ

Open-source 3D anatomy explorer: 2,234 selectable BodyParts3D meshes (github.com)

55 pointsby metrofun20 コメント

要約

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個の三角形が含まれており、約33 MBの圧縮ジオメトリをダウンロードします。完全なクレジット、ソースリンク、および適応の詳細は、ATTRIBUTION.mdに記載されています。

これは教育用エクスプローラーであり、診断または手術ツールではありません。

仕組み

ジオメトリはバッチにマージされます。構造ごとのGPUテクスチャが、変換、可視性、選択を制御し、コンポーネントジオメトリが正確なピッキングをサポートします。展開レイアウトは、表示されているピースのみをパックします。レンダリングはシーンが変更されると更新され、数千もの個別のドローコールなしでオービットコントロールは応答性を維持します。

オプションのWebMCPツールは、互換性のあるブラウザで解剖学の検索と検査を公開します。表示されるインターフェイスは、それらがなくても機能します。

ジオメトリの再構築

リポジトリにはブラウザ対応のジオメトリが含まれています。再構築はオプションです。公式のBodyParts3D OBJアーカイブと英語のメタデータテーブルを取得し、結合された概念と表示システムのマッピングを準備し、scripts/convert-anatomy.py、次にnode scripts/optimize-anatomy.mjs、そしてnode scripts/compress-models.mjsを実行します。簡略化は、構造ごとに0.2%の相対誤差制限を使用します。

デプロイ

このリポジトリをVercelにViteプロジェクトとしてインポートします。含まれているvercel.jsonは、npm ci、npm run build、およびdist出力ディレクトリを構成します。静的ホストで提供することもできます。

ライセンス

元のアプリケーションコードはMIT Licenseの下でリリースされています。解剖学データには独自のCC BY 4.0ライセンスがあります。再配布する際は、帰属表示を保持してください。サードパーティの依存関係は、それぞれのライセンスを保持します。

Issueとプルリクエストを歓迎します。インタラクションの問題については、再現手順とブラウザ/デバイスの詳細を含めてください。