ブランド計器を構築：Three.jsによる3D SVGロゴ変形ツール

/goal Brand Instrumentを構築する：添付された参照画像に密接に一致する、洗練されたブラウザベースの3Dクリエイティブインストゥルメント。実装、実ブラウザでの検査、批評、修正を通じて自律的に作業を進める。3.5時間以内にレビュー可能な結果を目指し、要求される上限時間予算は4時間とする。開始時刻を記録し、反復間の経過時間を確認する。受け入れ基準が満たされた場合は、早めに終了する。 最初に 参照を検査し、プロジェクトの指示を読む。アプリを起動し、そのブラウザと対話し、実際のスクリーンショットを検査できることを確認する。利用可能な参照をプロジェクトに保存し、繰り返し比較する。参照またはブラウザ検査が利用できない場合は、すぐに報告する。視覚的検証を決して捏造しない。 範囲 1つの優れたM字彫刻、クローム素材、洗練されたインタラクション。 TypeScript、React、Vite、Three.jsを使用する。WebGPURendererとTSLを優先し、テスト済みのWebGL2フォールバックを用意する。実3Dを維持しながら、必要に応じて実装を適応させる。ジオメトリ、モーション、レンダリング、UIを分離する。ランタイム時にモデルAPIは不要。 ビジュアルターゲット 参照の流れるようなM字、密集した平行なシルバープレート、実質的なボリューム、きれいなベベル、狭い隙間、広い白いスタジオ反射、暗い反射帯、柔らかい接地影、白い背景、控えめな黒のManropeタイポグラフィを維持する。彫刻がビューポートを支配する。 アートディレクションを再設計せずに、物理的一貫性と使いやすさを向上させる。参照は芸術的なターゲットであり、製品を偽装するためのテクスチャではない。 ジオメトリとモーション 局所的な曲げに十分なトポロジーを持つボリュームプレートを構築し、制御可能なリグまたはガイドカーブで駆動する。右腕をドラッグすると、アンカーされた領域と隣接プレート間のコヒーレントな影響を持つ、滑らかな局所的なファン/ウェーブが作成される。 リリースすると、安定したフレームレート非依存の減衰ダイナミクスで静止構成に戻る。信頼できる厚みを維持し、極端な変形を制限する。法線、影、ポインターピッキングを変形サーフェスと一貫させる。 スクリーンスペース変位、フラット画像ワーピング、事前録画されたヒーロービデオ、スクリーンショットの代用は使用しない。 機能 ドラッグ/リリース、深度検査のためのカメラオービット、スプレッド調整、剛性/減衰コントロール、リセット、PNGエクスポート。 このコアを優先する。任意のSVGインポート、オーディオ、追加モードは後日の作業とする。機能的なコントロールのみを表示する。 反復ループ 価値のある変更を実装する。 アプリを実行し、一貫したビューポート/カメラ設定で実際のスクリーンショットを検査する。 ドラッグ、リリース、リセット、エクスポートを実行する。 残っている3つの最大の視覚的または機能的な欠陥を特定する。 最も重要な欠陥を修正し、繰り返す。 有用なチェックポイントと比較画像を保存する。最良の作業バージョンを維持する。繰り返しの変更が失敗した場合は、アプローチを変更する。 ビルドが成功しただけでは完了ではない。 受け入れ 認識可能な彫刻的なM字、くっきりと分離されたプレート、説得力のあるクローム、参照に近い構図。 滑らかな局所変形と、目に見える裂け目や深刻な交差のない安定した回復。 別のカメラアングルから実際のボリュームを確認する。 機能するコントロール/エクスポート、ブロッキングコンソールエラーなし、ビルド成功。 ビデオまたはタイムドフレームシーケンスを通じてモーションを検査する。 利用可能なブラウザでパフォーマンスを測定し、バックエンドとハードウェアの制限を報告する。デスクトップで60fpsを目指すが、未テストの結果を主張しない。 基準を弱めたり、自己評価の品質スコアだけに依存したりしない。 引き継ぎ 最終15分を検証と引き継ぎのために確保する。 ソース、ロックファイル、起動手順、最良のスクリーンショット、変形/復元状態、別のカメラアングル、モーションの証拠を保存する。 完了したチェック、残りの視覚的ギャップ、次のステップを含むREVIEW.mdを書く。 時間予算または真のブロッカーに達した場合は、最良の結果を保存し、未達成の基準を正直に報告する。時間を消費するためにアイドル状態にならない。 プロジェクトの許可内で日常的な決定を自律的に行う。公開しない、サービスを購入しない、無関係なプロジェクトを変更しない。