threejs-product-viewer

製品ビューアーとコンフィギュレーター

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

モデルのメッシュ名、マテリアル名、単位、バリエーション構造、カメラのターゲット、ビジネス上のオプションを確認してください。UI のラベルを任意のメッシュ配列インデックスに結び付けず、製品の選択肢をレンダリングの変更に対応させる、安定したマッピングを定義してください。

選択中のオプション、利用可否、リセット、URL による状態の永続化（必要な場合）のための状態モデルを構築してください。価格と利用可否に関する決定権は、既存のアプリケーションデータレイヤーに保持してください。モデルから商取引に関する事実を推測しないでください。意味的に同等な HTML コントロールと、選択値の概要を提供してください。

不変のテクスチャは安全に共有しながら、インスタンスごとに所有するマテリアルの状態にバリエーションを適用してください。非同期のテクスチャやモデルの切り替えで、古い処理の完了結果が反映されないようにしてください。ワイド画面と狭い画面の両方に合わせて各プリセットのフレームを調整し、被写体が適切に表示される範囲でのみ、オービットとズームを制限してください。

安定したアンカーを使ってホットスポットを配置し、遮蔽された場合やカメラの後方にある場合の状態にも対処してください。ビューをリセットする手段と、ドラッグ操作から明確に抜ける手段をユーザーに提供してください。製品の詳細を見えにくくする劇的なエフェクトを追加する前に、制御されたライティングの下でマテリアルの見え方を調整してください。

スクリーンショットを撮影する場合は、キャプチャサイズを明示してレンダリングし、その後にレンダラーとカメラの状態を復元してください。レンダリング直後にキャプチャするか、適切なターゲット／読み戻しパイプラインを使用してください。preserveDrawingBuffer が常に必要というわけではありません。クロスオリジンの制限に対処し、HTML オーバーレイをエクスポートに含めるかどうかを決めてください。

有効なオプションの組み合わせすべて、または代表的な境界値の組み合わせ、素早い切り替え、リセット、ディープリンク、エクスポート時のフレーミング、モバイル操作、アセットの読み込み失敗を検証してください。

API リファレンス

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