ラグジュアリー 3D ウォッチ製品体験ページ (Next.js + Three.js)

高級腕時計の 3D プロダクト体験ページをデザインする。
**ターゲットユーザー:** 富裕層の顧客、時計愛好家、30～50 歳のビジネスパーソン。
**ブランドトーン:** ラグジュアリー × テック (モダンで洗練されたハイエンドな雰囲気)。
スクロール体験 (5 セクション):
ヒーローセクション – 腕時計が暗闇から光の中へゆっくりと現れ、回転する。ホログラフィック効果とフレネル反射をカスタムシェーダーで実装する。
詳細ズーム – 文字盤のクローズアップ。GLSL を使用して、金属的な反射、パララックスマッピング、リアルタイムの光沢を実現する。
メカニズム分解 – 時計が分解され、内部のムーブメントが空間に浮かぶ。エネルギーフィールド効果のためにディスプレイスメントシェーダーを使用し、各パーツにグロー効果を追加する。
素材体験 – さまざまな素材のバリエーションを切り替える。金属感、ガラスの屈折、チタンのマットな質感を PBR シェーダーで物理ベースで表現する。
エンディング – 時計が再構築され、カスタムシェーダーで作成された抽象的なグラデーションメッシュの背景が表示される。ブルームや被写界深度などのポストプロセスを適用する。
**技術スタック:** Next.js 15 + Three.js + React Three Fiber + GLSL (カスタムシェーダー) + react-postprocessing + Lenis。
シェーダー要件:
フレネル反射シェーダー (リムライト効果)
PBR マテリアルシェーダー (ラフネス、メタリック、AO)
ホログラフィックシェーダー (玉虫色の干渉効果)
ディスプレイスメントシェーダー (波打ちと歪み効果)
カスタム背景シェーダー (グラデーションノイズ)
ポストプロセス: Bloom、ChromaticAberration、DepthOfField、Vignette。
以下の具体的な数値の提案をお願いします:
各セクションのスクロール範囲 (% または vh 単位)
アニメーションパラメーター (位置、回転、スケールなどの開始/終了値)
イージング関数 (イーズタイプ)
カメラの FOV、位置、ターゲット値
ライティング設定 (強度、色、位置)
各シェーダーのユニフォーム値 (時間進行、スクロール進行、色相、強度など)。