Role C: フロントエンド＆3Dモジュール

実装詳細とアーキテクチャ要件

トップページへ戻る

Role Cが担当する「フロントエンド＆3Dモジュール」は、保護者が直感的に状況を把握できるUIを提供する役割を担います。「巨大な3Dモデルによるブラウザクラッシュ」や「バックグラウンド時のWebSocket切断」を回避し、モバイル端末でもサクサク動く堅牢なWebアプリケーションを構築する必要があります。

1. 開発に必要な環境・情報（準備物）

  • 環境: React, Three.js (@react-three/fiber, @react-three/drei)
  • アセット: Polycam等でスキャンした部屋の3Dモデル（.gltf / .glb形式）
  • 連携情報: Role AからのMQTTトピック名、Role BからのIoT Coreエンドポイント（WebSocket用）と履歴取得APIのURL

2. 実装手順と技術的課題の根本解決アプローチ

Step 1: React + Three.jsによる3D空間の構築

目的: Polycamの3Dモデルをブラウザ上でレンダリングする。

  1. @react-three/fiber をセットアップし、useGLTF フックでモデルを読み込みシーンに配置。OrbitControlsで視点操作を可能にする。

【重要】技術的課題と根本解決:
スキャンした高精細モデルはファイルサイズが大きく、モバイル端末でブラウザがクラッシュします。必ずBlender等で事前にポリゴン数を削減（Decimate）し、テクスチャを圧縮（Draco圧縮等）した軽量な .glb ファイルを使用してください。また、Reactの Suspense を用いてローディングUIを実装しUXの低下を防ぐこと。

Step 2: MQTT over WebSocketの受信

目的: 危険検知アラートをブラウザにリアルタイムでポップアップさせる。

  1. aws-iot-device-sdk-v2 (ブラウザ版) または mqtt.js を使用し、IoT CoreにWebSocket接続してトピックをSubscribeする。

【重要】技術的課題と根本解決:
スマホの画面ロックやタブのバックグラウンド化によりWebSocket接続は頻繁に切断されます。切断を検知して自動再接続（Exponential Backoff）を行うロジックを実装し、UI上に「接続中/オフライン」のステータスインジケーターを必ず配置して状態の不整合を防いでください。

Step 3: リアルタイムアラートの3Dマッピング

目的: 受信したアラートの座標を3D空間上に視覚化する。

  1. MQTTで受信した2D座標（カメラ画像上のX, Y）を、3D空間の座標（X, Y, Z）に変換し、該当位置に警告マーカーを描画する。

【重要】技術的課題と根本解決:
2Dから3Dへの変換はカメラの設置角度や画角に依存するため単純な計算ではずれます。Three.jsの Raycaster を用いて、仮想カメラから3Dモデルの床面に向けてレイを飛ばし、交差判定（Intersection）によって正確な3D座標を算出するロジックを実装してください。

Step 4: 履歴データの可視化（ヒートマップ）

目的: 過去の危険エリアを3D空間上に重畳表示する。

  1. Role BのAPIから履歴データを取得し、座標データ群を元にヒートマップやパーティクルを生成する。

【重要】技術的課題と根本解決:
大量のデータポイントを個別のメッシュとして描画するとドローコールが増大しFPSが著しく低下します。必ずThree.jsの InstancedMesh を使用するか、カスタムシェーダーを用いてGPU側で一括描画するパフォーマンス最適化を行ってください。

3. 他ロールとの連携ポイント（アウトプット）

  • Role Aへ: 3Dマッピングの計算に必要な、カメラの実世界での設置位置（高さ、角度）と画角（FOV）のパラメータを要求します。
  • Role Bへ: 履歴取得APIのレスポンスフォーマットのすり合わせと、CORSエラー発生時の対応を依頼します。