スターターは createRoot を使い、選択中のシーンにつき 1 つの SDK インスタンスを所有します。
動作するコンポーネントから始める
スターター の src/Viewer.tsx を開き、そのライフサイクルを既存 React アプリでも使います。コア SDK に専用 HOC やフレームワーク別描画器は不要です。
クイックスタートに全ソース があります。別の UI フレームワークでは小さい 設置ヘルパー も使えます。
境界を守る
- ホストの作成後に effect 内で SDK を生成します。高さは 0 にしません。
- WebGL はブラウザーで読み込み、SSR 中に生成しません。
- Work を解決・解析してから読み込みます。Team 認証情報はローカルサーバーに保持します。
- 選択変更・アンマウント後の古い完了通知を無視します。
- 実コンテナーのサイズを監視し、レイアウト変更後に
refreshします。 - 終了時に通信を中断し、購読・サイズ監視を解除して SDK とレイヤーを破棄します。
React 開発用 Strict Mode では effect の設定・終了を複数回実行することがあります。再設置可能な新しいホストを残してください。破棄済みインスタンスや古いキャンバスの保持は不具合です。
実行中の状態を参照のままコピーしない
SDK の状態は Three.js ベクトルを含みます。シリアライズには 視点保存ヘルパー を使います。インスタンス参照は現在の effect に属し、破棄後に別コンポーネントへ流用しません。
結果を確認する
設置・破棄・再設置、読み込み中のシーン交換、ウィンドウを変えない親要素のサイズ変更を試します。キャンバスは常に現在の 1 つだけとし、古いコールバックが新シーンを更新しないことを確認します。
拡張 SDK は公開 peer dependency に従います。次は 本番チェックリスト へ進みます。