threejs-html

Web とフレームワークの統合

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

キャンバスを挿入する前に、フレームワークのクライアント／サーバー境界、ルーティングのライフサイクル、スタッキングコンテキスト、レイアウトを確認してください。レンダラーはブラウザーのライフサイクル内でのみ作成してください。サーバーモジュールの評価時に window や WebGL にアクセスしないでください。

CSS で安定したキャンバス領域を確保し、そのコンテナーを監視してください。意味のある見出し、コントロール、フォーム、検索可能な製品情報は HTML に保持してください。読み込み中、エラー、フォールバックの各状態には、既存のデザインシステムを使用してください。初期表示に不要な重い 3D コードは遅延読み込みしてください。

オーバーレイとシーンの間でポインターイベントを明確に振り分けてください。リンクやタッチスクロールを妨げる、ページ全体を覆う透明なキャンバスは避けてください。シーンに固定されたラベルでは、ワールド座標を投影し、カメラの背後にある場合、オクルージョン、ビューポートのクリッピング、読みやすい配置に対処してください。

複数の製品サムネイルには、カードごとにコンテキストを作るのではなく、ビューポートを適切に分割した共有レンダラーや静的プレビューの使用を検討してください。シザー矩形とイベント座標には、同じビューバウンドを使用してください。実際のモーション要件に応じて、画面外のコンテンツを一時停止するか、無効化してください。

非同期読み込み中や開発時の再マウント時にも、安全にルートをクリーンアップできるようにしてください。ページスクロール、ブラウザーのズーム、ネストされたスクロールコンテナー、レイアウトシフト、ページ遷移後の再訪問、動きの軽減、レンダリングに失敗した場合のコンテンツの利用可能性を検証してください。

API リファレンス

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