ReactとThree.jsで生物学教科書に命を吹き込む
学校の教科書の退屈な細胞図を覚えていますか？矢印だらけの平面的な絵で、ミトコンドリアはスリッパのように見え、核はただの円而已。いつか、静的な画像ではすべてが三次元でどのように配置されているかを伝えるには不十分だと気づくでしょう。開発者のcclankさんはこの問題を解決するためにCell Architecture Studioを作成しました。細胞学の研究をブラウザ内で3Dモデルを探求することに変えるインタラクティブなギャラリーです。
这是什么
このプロジェクトは、7種類の細胞を調べられるインタラクティブなスタジオです：神経細胞や細菌から植物細胞や白血球まで。これは単なる3Dファイルビューアではありません。著者は細胞小器官の詳細な説明、比較モード、さらにはAIチューターの雛形まで備えた本格的な教育アプリインターフェースを構築しました。
なぜ開発者として注目すべきでしょうか？まず、React 19と重いThree.jsグラフィックを組み合わせる優れた例。其次に、ビジュアルテストの実装に興味深い点があります。スタイルを更新後に3Dシーンを壊してしまった経験があれば、ソースコードに見応えのある発見があるでしょう。
スタジオでできること
このアプリには、一般的なデモシーンとは異なるいくつかの機能があります。
詳細とビューモード
最も詳細なモデルは、植物細胞と白血球です。これらはネイティブテクスチャが保持されたGLB形式で読み込まれます。2つのメインモードがあります：
- Mesh: すべての詳細を備えた標準的なモデル表示。
- Focus: 特定の細胞小器官を強調表示し、不要なビジュアルノイズを削除するモード。例えば、ゴルジ体だけを学習したい場合に便利です。
スマートインターフェース
このプロジェクトにはAIチューターが含まれています。現時点では事前作成されたプロンプトと進捗追跡を備えたコンセプトですが、教育ソフトウェアの方向性を示しています。異なる細胞の構造を比較できる比較パネルや、各オブジェクトの詳細なメタデータカードがあります。
レスポンシブ3D
開発者はCanvasをモバイルレイアウトに収めるのに苦労することがよくあります。ここでは、デスクトップ、コンパクト、モバイルの3つのレイアウトバリアントが実装されています。そして、これは単に「肉眼で」テストされているのではなく、自動スクリーンショットで検証されています。
内部の技術スタック
このプロジェクトはレガシーコードのない最新のスタックで構築されています：
- React 19とTypeScript: 最新の基盤。
- Vite: 高速ビルド用。
- Three.js + React Three Fiber (R3F): Web 3Dのデファクトスタンダード。
- Drei: モデルの読み込みなどの定型作業を担うR3F用ヘルパーライブラリ。
- Playwright Core: ビジュアル検証に使用。
興味深いポイント：インターネット速度が遅く、重いGLBモデルのダウンロードがまだ完了していない場合、アプリがクラッシュしたり空白の画面を表示したりしません。代わりに、手続き的なフォールバックが作動します—メインのアセットが読み込まれる間、プレーンなThree.jsで簡略化されたジオメトリが生成されます。
ビジュアル整合性を検証する方法
通常、テストはロジックを確認しますが、3Dプロジェクトでは画像が「ドリフト」しないことが重要です。リポジトリにはスクリプト verify.mjs があります。Playwrightを起動し、異なる解像度でスクリーンショットを撮影し、Canvasでピクセルメトリクスを比較します。これにより、モデルのレンダリングに失敗したり、UIが重要なコントロールに重なったりするバグを検出できます。
検証を自分で実行するには：
- ローカルサーバーを起動:
npm run dev - 別のターミナルで実行:
npm run verify
スクリプトは植物細胞のレンダリング、白血球、モーダルウィンドウ機能をチェックします。これはグラフィックアプリケーションでQAを自動化する良い例です。
誰がこのプロジェクトを探索すべきか
コードを調べることを推奨するのは2つのケースです。React Three Fiberでの作業が初めての場合は、正しいコンポーネント構造とシーン内のイベントハンドリングを学べます。そしてEdTechプロジェクトに取り組んでいる場合は、モダンなデジタル教科書がどのようなものか готовыйリファレンスとしてCell Architecture Studioを活用できます。
もちろん、このプロジェクトはまだプロトタイプ状態です。すべての細胞に高品質なモデルが準備されているわけではなく、ドキュメントも簡潔な部分是あります。しかし、教育プラットフォームの基盤や、Reactアプリに複雑な3Dを統合する例としては、非常に堅実な作品です。
関連プロジェクト