human-atlas とは？オープンソース3D解剖学エクスプローラーを完全解説

human-atlasはReact・Three.jsで構築されたオープンソースの3Dインタラクティブ解剖学ツールです。2,234個のメッシュを個別選択・回転・ズームでき、15の解剖学システムと3,432の命名済みコンセプトを探索できます。APIキー不要・無料で利用可能な点が最大の強みです。

GitHubで急上昇中の ashemag/human-atlas をご紹介します。スター数 1,629★ を獲得し、Web分野で注目されているツールです。

human-atlas とは？

human-atlasはGitHubで急上昇中のオープンソース3D解剖学エクスプローラーで、1,629スターを集めています。React・Three.js・shadcn/uiで構築され、BodyParts3D 4.0（CC BY 4.0ライセンス）の成人男性解剖データを使用しています。2,234個の個別選択可能なメッシュ、15の解剖学システムの切り替え、3,432の命名済みコンセプト検索が可能です。

ライブデモが公開されており、APIキー不要でローカル実行もできます。Vercelへのデプロイも簡単で、Node.js 22.13以降があれば数コマンドで起動できます。

こんな人におすすめ:

エンジニア向け: WebGLやThree.jsを学びたいフロントエンドエンジニアが、大規模3Dメッシュ管理とGPUテクスチャによる可視性制御の実装を参考として活用できます。
非エンジニア向け: 医学部生・看護学生・解剖学を学ぶ学生が、教科書の平面図では理解しにくい3D空間での器官・骨格の位置関係を視覚的に学習できます。

主な機能・特徴

インタラクティブ3D操作

human-atlasの核心は、2,234個の個別メッシュをWebブラウザ上でリアルタイムに操作できる3Dビューワーです。マウスのドラッグで軌道回転、スクロールでズーム、クリックで構造物を個別選択できます。選択した部位の詳細情報パネルが表示され、解剖学的名称と識別子を確認できます。

システム別表示と検索

2,234個のメッシュを個別選択・軌道・ズームできる3Dインタラクション機能
15の解剖学システムの表示切り替えと骨格・臓器プリセット切り替え
3,432の解剖学的名称と識別子のリアルタイム検索・詳細表示
爆発図（分解表示）でパーツを空間的に展開して全体観察
モバイル対応のコンパクトUIとタッチ・タップ操作サポート

WebMCPツールとの統合

オプションのWebMCPツールを使用すると、対応ブラウザから解剖学の検索・検査機能を外部ツールとして呼び出せます。ただし、通常のインターフェースはWebMCPなしでも完全に動作します。

使い方・始め方

インストール手順

Node.js 22.13以降が必要です。APIキー・アカウントは不要です。

git clone https://github.com/ashemag/human-atlas
cd human-atlas
npm ci
npm run dev

ブラウザで http://localhost:3016 を開くと3D解剖学エクスプローラーが起動します。

バリデーションと品質チェック

プロジェクトには包括的なバリデーションスクリプトが用意されています。

npm run check
node scripts/validate-atlas.mjs
node scripts/validate-interactions.mjs
npm run build

メッシュバッファ・名前・コンセプトのメンバーシップ、爆発レイアウト、タップvsドラッグのハンドリングなどを検証します。

デプロイ方法

静的サイトとして公開するには npm run build でビルドし、dist/ の出力をVercelにデプロイします。

npm run build
# dist/ ディレクトリをVercelまたは任意の静的ホストに公開

リポジトリにはVercel用の vercel.json が含まれており、npm ci → npm run build → dist/ 出力が自動設定されています。Vercelへのインポートは1クリックで完了します。

3D解剖学オープンソース使い方：実践的な活用事例

医学教育・試験対策

医学部生が試験前に骨格系・循環器系を3Dで確認し、各部位の名称と位置関係を効率的に暗記できます。骨格プリセット・臓器プリセットを使えば、目的の解剖学システムだけを表示して集中的に学習できます。

Three.js・WebGL学習の実装参考

フロントエンドエンジニアがThree.jsの大規模メッシュ管理・GPU最適化手法のリファレンス実装として研究できます。バッチマージ、GPUテクスチャによる可視性制御、2,288,268トライアングルのパフォーマンス最適化手法は、実務でのWebGL開発に直接活用できる知識です。

インタラクティブ教材制作

解剖学教育者がWebブラウザ上でインタラクティブな授業教材として活用し、学生にリアルタイムで部位を説明できます。スター数1,629を誇る実績があり、教育現場での信頼性も高まっています。

なぜ今このツールか？商用ツールとの違い

Visible Body・Complete Anatomyとの比較

医療・教育向けの商用3D解剖学ツールとして、Visible BodyやComplete Anatomyが有名です。これらは年間数万円のサブスクリプションが必要で、機能は豊富ですが個人利用や学習目的には敷居が高い場合があります。

human-atlasの差別化ポイントは完全無料・オープンソース・自己ホスト可能である点です。BodyParts3D 4.0データ（東京大学発のCC BY 4.0ライセンス）を使用しており、ライセンス条件を守れば商用利用も検討できます。また、ソースコードが公開されているため、WebMCPツールとの統合や機能カスタマイズも可能です。

GitHubで急上昇している背景

2026年9月時点でGitHub Trendingに登場し、1,629スターを獲得した背景には、医学教育のデジタル化需要と、Three.jsを使った高品質なWebGLアプリケーションへの関心の高まりがあります。特に、33MBの圧縮ジオメトリをブラウザで滑らかにレンダリングする技術的達成が注目を集めています。

こんな人に向いている

human-atlasが特に価値を発揮するのは以下のような職種・用途です。

医学部生・看護学生 解剖学の試験対策として、教科書の2D図では把握しにくい3D構造を直感的に理解できます。15のシステム別表示（骨格・筋肉・循環器・神経系など）を切り替えながら学習でき、3,432の命名済みコンセプトの検索機能で名称の確認も素早くできます。

フロントエンドエンジニア・Three.js開発者 2,234個のメッシュを60fpsで滑らかに描画するためのGPUテクスチャ最適化、バッチマージ、爆発レイアウト計算など、実用的な大規模WebGL実装の参考になります。TypeScript + React + Three.jsのモダンスタックで構築されており、コードの読みやすさも優秀です。

解剖学教育者・医療コンテンツ制作者 ブラウザだけで動作するため、授業でプロジェクターに映して学生と一緒にリアルタイムで部位を指示できます。自己ホストすることで、機関内の安定した教育環境として活用できます。

使う前に知っておきたいこと

技術的制限

Node.js 22.13以降が必須: 古いNode.jsバージョンでは動作しません
データ容量: 圧縮済みジオメトリが約33MB のダウンロードが発生します（初回アクセス時）
成人男性データのみ: 現在のビューワーはBodyParts3D 4.0（成人男性参照解剖）のみを使用しており、女性・小児・病変例の解剖データは含まれていません
実機テスト未実施: 物理デバイスでのパフォーマンスや実際のマルチタッチハードウェアは未テストとREADMEに明記されています
教育・研究目的のみ: 「診断・外科ツールではない」とREADMEで明示されています。医療判断への使用は禁止されています

ライセンス

アプリケーションコード: MIT License（商用利用・改変・再配布自由）
解剖学データ（BodyParts3D 4.0）: CC BY 4.0（帰属表示が必要）
再配布時はATTRIBUTION.mdの帰属情報を保持する必要があります

コントリビューター

現在コントリビューターは1名（作者のみ）で、個人プロジェクトとして開発されています。長期的なメンテナンスや新機能対応については、GitHubのIssueを通じて確認することを推奨します。

GitHub 解剖学エクスプローラー無料の始め方まとめ

human-atlasは、オープンソース・完全無料・APIキー不要で使える3D解剖学エクスプローラーです。医学部生が試験対策に使えるのはもちろん、Three.js・WebGLを学びたいフロントエンドエンジニアにとっても実用的な実装参考になります。

商用ツールが高額ライセンスを要求する中、CC BY 4.0ライセンスのBodyParts3Dデータを活用したこのプロジェクトは、教育コンテンツのオープン化という観点でも注目に値します。まずは公式のライブデモを試してみてください。

GitHub でチェックする →

この技術を学ぶ

WebやThree.jsに興味を持った方には、Udemyのオンラインコースもおすすめです。

関連するWebコース一覧 — セール時（最大90%OFF）を狙うとお得です

human-atlas とは？オープンソース3D解剖学エクスプローラーを完全解説