threejs-scene

シーン、カメラ、数学

プロジェクトにインストール済みのバージョンと既存のアーキテクチャを使用してください。これらの指示はユーザーのタスクを補足するものであり、無関係な変更や外部での操作を許可するものではありません。

シーンを変更する前に、ホスト要素のサイズ、レンダラーの所有者、ワールドスケール、右手系か左手系か、上方向の軸、カメラの種類を確認してください。1つの体験には単一のレンダラーを使用することを優先してください。複数のビューで共有リソースを活用するメリットが明確にある場合は、ビューポートやシザーを使用してください。

グループを使って、インポートしたモデルのトランスフォームとインタラクション用のピボットを分離してください。ローカル座標とワールド座標を区別してください。トランスフォームを変更した直後に同期的な境界や座標を取得する場合は、その前にワールド行列を更新してください。向きの補間にはクォータニオンを使い、頻繁に実行される処理ではベクトルを再利用してください。オイラー角とクォータニオンを繰り返し変換するのは避けてください。

パースペクティブカメラは、オブジェクトの境界と水平方向・垂直方向の両方の視野角に基づいてフィットさせてください。高さだけに基づいてフィットすると、横幅の広い被写体が切れることがあります。パースペクティブの深度精度を高めるため、正の near 面と適切な far 面を設定してください。正投影カメラでは near 面にゼロを指定できます。投影設定を変更した後は、投影行列を更新してください。

ResizeObserver を使ってキャンバスのコンテナーに合わせてサイズを設定し、サイズがゼロの場合は処理をスキップしてください。CSS サイズと描画バッファーのサイズは分けて管理してください。ピクセル比の上限を適切に設定してください。カメラ、レンダラー、サイズに依存するレンダーターゲットはまとめて更新してください。レンダラーのサイズ設定でレイアウト用の CSS を上書きしないでください。

レンダーループの所有者は1つにしてください。setAnimationLoop は XR との連携に適しています。XR 以外では、既存のフレームワークや requestAnimationFrame によるループも適切な場合があります。破棄時にはループを停止し、オブザーバーの接続を解除し、リスナーを削除して、所有する GPU リソースを解放してください。レンダラーを破棄しても、シーンのリソースは解放されません。

縦横比が1:1でないコンテナー、モバイル端末の向き、非表示から表示への切り替え、繰り返しのマウント、通常より横幅や高さが大きいアセットのフレーミングを確認してください。

API リファレンス

正確なシグネチャとリビジョン固有の動作については、公式ドキュメントを参照してください。ドキュメントを参照できない場合は、インストール済みの型定義やソースを確認し、不確かな点が残る場合はその旨を明記してください。