没入感のある3D田園風景サイト

ブラウザで動作する、没入感のある3D田園風景サイトを構築してください。テーマは次のとおりです： 「緑の海／田園を渡る風」 コードを完成させ、必要な依存関係をインストールして、プレビューを起動してください。提案や実装計画だけで終わらせないでください。 1. ビジュアル方針 全体の雰囲気は、アートディレクションに一貫性のあるインタラクティブな風景サイトのように、自然で穏やか、洗練されたものにしてください。 シーンには次の要素を含めてください： 前景：細く見分けやすい葉、曲がった茎、垂れ下がった稲穂をいくつか配置してください。 中景：遠くまで続く水田を、十分な密度と自然な間隔の変化を持たせて表現してください。 背景：不規則な樹木のシルエット、重なり合う低い丘、控えめな空気遠近法を配置してください。 空：柔らかなグレーブルーの色調、雲の微妙な変化、地平線での自然な色の移り変わりを表現してください。 デフォルトのカメラは稲穂より少し高い位置に置き、遠くの丘に向かって水田を見渡すようにしてください。 フレームの約3分の1を空が占め、水田が構図の中心となるようにしてください。 植生には主に深緑、オリーブグリーン、黄緑を使用してください。蛍光色のような緑は避けてください。 稲の高さ、向き、曲がり具合、色に自然なばらつきを持たせてください。 2. アニメーション要件 風は、水田を横方向に伝わる連続した波として見えるようにしてください： 根元はほぼ固定したまま、葉先や稲穂に向かうほど動きを段階的に強くしてください。 同じエリアの植物はまとまりを持って動かしつつ、個体ごとの違いも残してください。 ゆっくりとした大規模な風の波に、局所的な小さな揺らぎを組み合わせてください。 すべての植物が完全に同期して揺れないようにしてください。植物全体を平行移動させたり、葉をちらつかせたりしないでください。 デフォルトでは、長時間見ていても心地よい穏やかな風にしてください。 3. インタラクション要件 シーンに実際に作用する、シンプルな操作系を用意してください： 風速スライダー：風のアニメーションの強さと速度を滑らかに調整できるようにしてください。 ライティングモード：Morning、Afternoon、Golden Hourを用意してください。空、光の方向、色温度、フォグの色を連動して変化させてください。 ビュー モード：Open FieldとAmong the Riceを用意し、カメラを滑らかに切り替えてください。 一時停止／再開：環境アニメーションを一時停止・再開できるようにしてください。 マウスの動きにごく subtle なカメラ反応を加えても構いませんが、めまいを起こすような動きにはしないでください。 デフォルトでカメラを大きな角度まで連続回転させないでください。 4. インターフェースデザイン 全画面のシーン上にインターフェースを重ねて表示してください： 左上：小さなVERDANTのワードマーク。 左下：セリフ体の見出し「緑の海」。 その下に、小さめのサブタイトル「何もしなくていい。風のそよぎを感じて。」を配置してください。 右下：コンパクトで半透明なダークグリーンのコントロールパネル。 テキストは読みやすく、余白を十分に取り、操作系が主な風景を遮らないようにしてください。 狭い画面でも、コントロール同士が重ならず操作できるようにしてください。 5. 技術要件とパフォーマンス Three.jsを使用してください。既存のプロジェクトがある場合は、そのビルド環境を維持してください。 大量の植生を処理するため、インスタンシングとGPU頂点アニメーションを使用してください。 植物ごとに個別の描画オブジェクトを作成したり、毎フレームすべての植物をCPUで更新したりしないでください。 遠距離では植生のディテールを減らし、適切なピクセル比の上限を設定してください。 アセットの読み込みを安定させるため、プロシージャルなジオメトリとマテリアルを優先してください。 シーンはリアルタイムで描画してください。メインシーンとして風景の静止画や動画を全面的に使用しないでください。 モデル名や比較用ラベルはポストプロダクションで追加します。シーンには含めないでください。 6. 完了条件 実装後、利用可能なブラウザツールを使って次の項目を確認してください： 初期ビューが正しく描画され、明らかなコンソールエラーがないこと。 すべてのコントロールが実際にシーンへ作用すること。 前景・中景・背景の奥行きとレイヤーが見分けられること。 稲が単純な直立した緑の線以上の表現になっていること。 風の動きが連続的かつ自然で、明らかに均一な反復になっていないこと。 カメラの切り替えが滑らかで、狭い画面でもインターフェースが使用できること。 特定の確認を実行できない場合は、そのことを明確に記載してください。 最後に、起動手順と、実際に実装した機能の概要を提示してください。