日本の桜の谷を描くインタラクティブ3D景観Webページ

ブラウザ上でリアルタイムに操作できる、完成度の高い3D景観のWebページを直接制作してください。 テーマ：日本の桜の谷。 HTML、CSS、JavaScriptで実装してください。画像は生成せず、設計案だけを提示するのもやめてください。 1枚の背景画像にパララックス効果を加えて3Dに見せかけないでください。実際に動作し、歩き回れる完成品が必要です。 【1. 作品の方向性】 遠近のレイヤーがあり、ひと続きになった、完成された谷の景観にしてください。 孤立した小さな置き物や浮遊島、台座付きのジオラマでも、単なる技術デモでもありません。 スタイルは現代的で精細なボクセルアートです。 立方体形状の造形言語は保ちつつ、高解像度でアンチエイリアスが効き、光と影が繊細な画面にしてください。 レトロな低解像度のピクセル表現や、大きな積み木を積み上げたような造形、画面全体にピクセルフィルターをかける表現は避けてください。 ビジュアル品質を最優先にしてください。機能をいくつか減らしても、構図、マテリアル、ライティングを犠牲にしないでください。 【2. 参考画像の使い方】 参考画像がある場合は、まず構図のレイヤー、スケール、光、色彩の関係を理解してください。 雰囲気とビジュアル表現だけを参考にして、シーンを新たに設計してください。 建物、木々、山、道の配置をそのまま流用したり、1:1で再現したりしないでください。 参考画像はWebページの背景素材ではありません。シーン自体を実際の3Dジオメトリで構成してください。 【3. シーン構成】 初期表示の時点で、完成度が高く魅力的な画面を見せてください。 ユーザーがまずカメラを回して、見栄えのよいアングルを探す必要がないようにしてください。 ジオラマのような等角投影の俯瞰カメラではなく、パースペクティブカメラを使用してください。 画面には明確な前景・中景・遠景を設けてください。 前景： 存在感のある古い桜の木を中心に、岩、草木、石灯籠、少量の花びらを添えてください。 画面の縁を自然に縁取る構図にしつつ、川、橋、主要な建物を隠さないでください。 中景： 曲がりくねった川で視線を画面の奥へ導き、赤い木橋を川に架けてください。 集落、茶屋、神社、小道を地形に沿って配置し、建物同士を実際に行き来できる関係にしてください。 地面には起伏や水際のライン、自然な遷移を設け、平面上にモデルを均等に並べないでください。 遠景： 斜面に建つ多層塔、距離の異なる森林と山稜、さらに遠くの雪山を配置してください。 スケールの変化、遮蔽、色温度の変化、空気遠近法で距離を表現してください。 遠くの物体を単に小さくするだけでは不十分です。 すべての要素を均等に詰め込まないでください。主役と脇役、密度の変化、余白、明確な視線の焦点が必要です。 【4. 造形と画面品質】 桜の木： 幹には曲がり、分岐、根元を作り、樹冠は不規則な花の塊で構成してください。 隙間や厚みの変化、見える枝を設け、規則的な球体や立方体の塊をいくつか置いただけの形にはしないでください。 建物： 屋根には重なった瓦、せり出した軒、梁や柱、格子窓を作ってください。 建物ごとに用途、規模、高さを変え、同じ家を複製して谷全体に並べないでください。 地形： 水際には濡れた石、草むら、植生への自然な遷移を設けてください。 規則的すぎる段差、反復するストライプ、チェッカーボード模様、明らかなプロシージャル生成のグリッドは避けてください。 水面： 周囲の景物を映し、適度な波紋、深浅の変化、水際への自然なつながりを持たせてください。 可能な限り実際のシーンを反射させ、パフォーマンスのために品質を下げる場合も、見た目の信頼感を保ってください。 ちらつくノイズ、強すぎる歪み、一面の青い平面で水を表現しないでください。 ディテール： 錦鯉、花びら、ホタル、滝、遠くを飛ぶ鳥などを少量加えても構いません。 ただし、すべて雰囲気を高めるために使い、画面を雑然とさせないでください。 モデル数の多さをアピールするためだけにディテールを詰め込まないでください。 【5. 色彩と雰囲気】 デフォルトはブルーアワーにしてください。 冷たさのある谷と遠山、柔らかなピンクの桜、暖かくても白飛びしない灯籠の明かりと窓明かりを表現してください。 暖色の光は人の気配がある場所に集中させ、環境全体をオレンジ色に染めないでください。 柔らかな影、物体の接地部に生じる明暗、適切な露出を設定してください。 ブルームは控えめにし、アンチエイリアスと距離感のある薄い霧を加えてください。 白っぽく色あせた見た目、灰色がかった画面、過度な彩度、画面を覆う濃霧、白飛びしたライト、目立つジャギーは避けてください。 立方体のジオメトリはくっきり見せて構いませんが、レンダリング自体を粗雑にしないでください。 「朝」と「雨」の2種類の雰囲気も用意してください。 切り替え時には、空、環境光、霧、局所的なエフェクトも連動して変化させ、 背景色だけを変更するものにはしないでください。 【六、インタラクションとUI】 設計されたカメラアングルを4つ用意してください。 谷の全景、川辺のローアングル、寺院へ続く小径、山腹からの俯瞰。 切り替えは滑らかにし、それぞれのアングルに独自の構図上の価値を持たせてください。 基本操作： マウスのドラッグで視点を動かし、ホイールでズームまたは前進できるようにします。タッチ画面ではドラッグとピンチズームに対応してください。 視点のリセット、UIの非表示、現在の画面の保存機能を用意してください。 追加機能（任意）： 自由探索、ゆっくりしたカメラツアー、環境音。 環境音はデフォルトでオフにし、ユーザーが明示的にクリックした後だけ再生してください。 追加機能によって、デフォルト画面の完成度を損なわないでください。 UIは控えめで洗練されたデザインにし、景観を主役にしてください。 タイトルとコントロールバーは画面の端に配置し、視覚的な焦点を遮らないようにしてください。 デスクトップでもスマートフォンでも、ボタンが画面からはみ出したり、テキストが重なったり、操作できなくなったりしないようにしてください。 【七、実装とパフォーマンス】 Three.js / WebGL、およびバージョンを固定した互換性のあるCDN依存関係を使用して構いません。 成熟したレンダリング機能を優先し、「依存関係ゼロ」にするためにエンジン全体を書き直さないでください。 自作のHTML、CSS、JavaScriptは、できるだけ1つのHTMLファイルにまとめてください。 景物はプロシージャルなジオメトリとマテリアルで生成し、外部の画像や3Dモデル素材に依存しないでください。 繰り返し配置するオブジェクトには、適切なバッチ描画またはインスタンシング描画を使用し、 サブディビジョン、シャドウ、反射、レンダリング解像度を適切に調整してください。 高画質モードと軽量モードを用意し、スマートフォンではデフォルトで軽量設定を使用してください。 ディテールを増やすために、ボクセル数を際限なく増やさないでください。 読み込み中の表示、WebGL非対応時の案内、必要なエラーハンドリングを追加してください。 サウンドが有効になっていない状態では自動再生せず、システムの「視差効果を減らす」などの設定を尊重してください。 【八、納品前の検収】 コードを書き終えたら、すぐに納品しないでください。 現在の環境がブラウザでの実行とスクリーンショット撮影に対応している場合は、まず実際にページを開き、 デフォルトのカメラ、4つの視点、雰囲気の切り替え、デスクトップとスマートフォンでのレイアウトを確認し、 そのうえでスクリーンショットを見ながら、明らかな構図、露出、遮蔽、レンダリング上の問題を修正してください。 重点的に確認する項目： 画面が真っ白または真っ黒になっていないか、読み込みに失敗していないか、コンソールエラーがないか。 メッシュの貫通、ちらつき、シャドウの縞模様、露出オーバー、水面の異常がないか。 デフォルト画面が小さな箱庭ではなく、本当に完成した景観に見えるか。 機能ボタンが実際に使えるか、モバイル画面からはみ出していないか。 検収にはブラウザのスクリーンショットを使用して構いませんが、画像生成ツールは呼び出さないでください。 完了していないテストについては正直に説明し、検証済みだと主張しないでください。 最終納品物： 1. 実際に存在し、開くことのできるHTMLファイル、または現在の環境で利用できるインタラクティブプレビュー。 2. スクリーンショットを撮影できる場合は、実際のブラウザレンダリングによるスクリーンショットを1枚添付してください。 3. 操作方法と必要な実行条件を簡潔に説明してください。 制作はそのまま完了させてください。重要でない細部については、全体に一貫性のある設計判断を自分で行い、 自力で解決できる実装上の問題を、何度も私に判断させないでください。