作者: The Bugged Dev
ライブで試す このプロジェクトについて
Anatomy Atelierは、心臓、脳、肺、肝臓、腎臓、眼、腸、膵臓、皮膚を、検索可能な9種類の臓器ライブラリにまとめています。各項目では、回転・ズームできる3D標本に、構造ホットスポット、重要事項、学習カードを組み合わせ、断面、レイヤー、分離、臓器比較のツールも利用できます。
モデルの探索に加えて、レッスン、シンプルなアニメーションイラスト、クイズへ進めます。GLTFLoaderとMeshoptデコーダーで各アセットを読み込み、3臓器キャッシュ、プリフェッチ、オンデマンドレンダリングにより、頻繁な切り替えにも素早く応答します。
体験ポイント
- 心臓、脳、肺、肝臓、腎臓、眼、腸、膵臓、皮膚の9種類の臓器を検索して切り替えられます。
- ドラッグで回転、スクロールでズームし、ホットスポットを選んで構造の解説を確認できます。自動回転をオンにすれば連続して観察できます。
- 断面表示で内部構造を確認し、ワイヤーフレームのレイヤービューに切り替えるか、分離モードで台座と接触影を薄く表示できます。比較モードでは2つの臓器を並べて表示します。
- 臓器の基礎知識や学習カードからレッスンとクイズへ進み、自由な探索をガイド付き学習へ広げます。
技術解説
3Dアセット · Tripo臓器ライブラリ
9種類の臓器は個別のGLBアセットとして提供され、シーンノードとマテリアルにTripo識別子が含まれます。GLTFLoaderとMeshoptデコーダーで各臓器を読み込み、同じ表示空間にスケーリングして中央配置するため、ホットスポットとビューアーツールで共通の座標系を利用できます。
ビューアー操作 · コントロールとスクリーン空間ホットスポット
OrbitControlsが回転、ズーム、自動回転を処理します。ホットスポットはポインター判定にスクリーン空間への投影を使い、深度バッファと向きの判定で、メッシュへのレイキャストを繰り返さずに表示を制御します。クリッピング平面で断面を表示し、ワイヤーフレームの切り替えでレイヤービューを見せ、分離モードでは台座と接触影を薄くします。比較モードでは2つの臓器を並べ、現在の臓器の役割とスケールも表示します。
読み込み戦略 · 3モデルのキャッシュとプリフェッチ
アセットマネージャーは最近使用した3つの臓器を保持し、進行中の読み込みリクエストを再利用します。臓器にポインターを合わせるかフォーカスすると低優先度でGLBをプリフェッチし、臓器を切り替える際には関連イラストもブラウザキャッシュに先読みします。
レンダリングと学習 · オンデマンド更新
常駐するアニメーションフレームループは、操作、アニメーション、状態変更があるときだけレンダラーを呼び出すため、静止したシーンを継続的に再描画しません。Reactが検索、臓器選択、比較、レッスン、クイズを管理し、GSAPは選択内容の変更時に軽い表示アニメーションを加えます。
