インタラクティブ3Dボクセル桜の谷Webシーン

以下は、ご指定のプロンプトを日本語に翻訳したものです。 --- ブラウザ上でリアルタイムに操作できる、完成度の高い3DランドスケープWebページを直接制作してください。 テーマ：和風の桜の谷。 HTML、CSS、JavaScriptを使用して実装します。画像は生成せず、設計案だけを渡すのも禁止です。 背景画像1枚とパララックス効果で3Dを偽装しないでください。実際に動作し、探索できる完成品が必要です。 【一、作品の位置づけ】 これは、完全で連続性があり、遠近感のある谷の景観です。 孤立した小さな置物、浮遊島、台座付きのジオラマ、単なる技術デモではありません。 スタイルはモダンで精巧なボクセル / ボクセルアート： 立方体ジオメトリの造形言語を保ちつつ、画面は高解像度、アンチエイリアス、繊細なライティングであるべきです。 レトロな低解像度のピクセル化、粗いブロックの積み重ね、ピクセルフィルターの適用はしないでください。 視覚的な品質を最優先にします。機能を減らしても、構図、マテリアル、ライティングを犠牲にしないでください。 【二、参考画像の使用方法】 参考画像が添付されている場合、まずその構図の階層、スケール、光、色彩関係を理解してください。 雰囲気と視覚言語のみを参考に、シーンを再設計してください。 建物、木、山、道路の位置をそのままコピーしたり、1:1で複製したりしないでください。 参考画像はWebページ内の背景素材ではありません。シーン自体は実際の3Dジオメトリで構成される必要があります。 【三、シーン構成】 デフォルトで開いた時点で、完全で魅力的な画面が表示されるべきです。 ユーザーが先にカメラを回転させて良いアングルを探す必要はありません。 透視投影カメラを使用し、ジオラマのような等角投影の俯瞰カメラは使用しないでください。 画面には明確な前景、中景、遠景があります： 前景： 存在感のある古い桜の木が1本。岩、草木、石灯籠、少量の花びらと組み合わせ、 画面端に自然な額縁効果を形成しますが、川、橋、主要な建物を遮ってはいけません。 中景： 曲がりくねった川が視線を画面内に導き、赤い木橋が川に架かります。 集落、茶屋、神社、小道が地形に沿って配置され、建物の間には実際の通行関係があります。 地面には起伏、岸線、自然な遷移があり、平面上に均等にモデルを配置したものではありません。 遠景： 山腹の多層塔、異なる距離の森、山脊、そして遠くの雪山。 距離感は、スケールの変化、遮蔽、寒暖の変化、空気遠近法で表現します。 単に遠くの物体を小さくするだけではありません。 すべての要素を均等に敷き詰めないでください。主従、疎密、余白、明確な視覚的焦点が必要です。 【四、造形と画質】 桜の木： 幹には屈曲、分岐、根元があり、樹冠は不規則な花の塊で構成され、 隙間、厚みの変化、見える枝があります。規則的な球体やブロックの塊にしないでください。 建物： 屋根には重なった瓦、軒の出、梁柱、窓格子があります。 異なる建物には用途、ボリューム、高さの違いがあり、同じ家を谷全体に複製しないでください。 地形： 岸辺には湿った石、草むら、植生の遷移があります。 過度に規則的な階段、繰り返しの縞模様、市松模様、明らかなプログラム生成グリッドは避けてください。 水面： 周囲の景物を反映でき、適度な波紋、深浅の変化、岸辺の遷移が必要です。 可能な限り実際のシーンリフレクションを使用してください。パフォーマンスを落とす場合でも、視覚的に信頼できる状態を保つべきです。 キラキラしたノイズ、強い歪み、単一の青い平面で水を代替しないでください。 ディテール： 少量の錦鯉、花びら、蛍、滝、遠くの鳥は可能ですが、 すべて雰囲気に貢献するものであり、画面が騒がしくならないようにしてください。 モデル数を誇示するためにディテールを詰め込まないでください。 【五、色彩と雰囲気】 デフォルトはブルーアワー（薄明薄暮）： 冷たい色調の谷と遠山、柔らかなピンクの桜、暖かくとも露出オーバーでない提灯と窓の明かり。 暖色の光は人の活動がある場所に集中させ、環境全体をオレンジ色に染めないでください。 柔らかい影、物体の接触部分の明暗、適切な露出、 控えめなブルーム、アンチエイリアス、距離感のある薄い霧が必要です。 白飛び、霞がかった印象、過度な彩度、画面全体の濃い霧、露出オーバーの光、目立つジャギーは避けてください。 ブロックジオメトリははっきりしていても、レンダリング自体は粗くあってはなりません。 さらに「早朝」と「雨中」の2つの雰囲気を提供してください。 切り替え時には、空、環境光、霧、局所的なエフェクトが同期して変更される必要があります。 単に背景色を変更するだけでは不十分です。 【六、インタラクションとUI】 4つの設計されたカメラアングルを提供してください： 谷の全景、川辺のローアングル、寺の小道、山腹の俯瞰。 切り替えはスムーズで、各アングルは独立した構図的価値を持つ必要があります。 基本操作： マウスドラッグで視点変更、ホイールでズームまたは前進、タッチパネルはドラッグとピンチズームに対応。 視点リセット、UI非表示、現在の画面を保存する機能を提供してください。 オプションの拡張： 自由探索、スローカメラツアー、環境音。 環境音はデフォルトでオフにし、ユーザーが自発的にクリックした場合のみ再生します。 追加機能はデフォルト画面の完成度に影響を与えてはいけません。 UIは控えめでデザイン性があり、景観を主役にしてください。 タイトルとコントロールバーは端に配置し、視覚的な焦点を遮らないようにします。 デスクトップとモバイルの両方で、ボタンのはみ出し、テキストの重なり、操作不能の問題があってはなりません。 【七、エンジニアリングとパフォーマンス】 Three.js / WebGL、およびバージョンが固定され相互互換性のあるCDN依存関係の使用を許可します。 成熟したレンダリング機能を優先し、「ゼロ依存」のためにエンジン全体を書き直さないでください。 自作のHTML、CSS、JavaScriptは、可能な限り1つのHTMLファイルにまとめてください。 景物はプログラムによるジオメトリとマテリアルで生成し、外部の画像や3Dモデルリソースに依存しないでください。 繰り返しのオブジェクトには、適切なバッチ処理またはインスタンシング描画方式を使用してください。 分割数、影、反射、レンダリング解像度を適切に制御してください。 高画質モードと軽量モードを提供し、モバイルはデフォルトで軽い設定を使用します。 ボクセル数を無限に増やしてディテールを得ようとしないでください。 ローディング表示、WebGL非対応時のメッセージ、必要なエラーハンドリングを追加してください。 音声が有効になっていない場合は自動再生しないでください。動きの軽減を好むシステム設定を尊重してください。 【八、納品前の受け入れ】 コードを書いたらすぐに納品しないでください。 現在の環境がブラウザでの実行とスクリーンショットをサポートしている場合、まず実際にページを開き、 デフォルトのカメラ、4つの視点、雰囲気の切り替え、デスクトップとモバイルのレイアウトを確認し、 スクリーンショットに基づいて明らかな構図、露出、遮蔽、レンダリングの問題を修正してください。 重点的に確認する項目： 空白の画面、読み込み失敗、コンソールエラーがないか。 貫通、ちらつき、影の縞模様、露出オーバー、水面の異常がないか。 デフォルト画面が本当に完全な景観のように見えるか、小さなジオラマではないか。 機能ボタンが実際に動作するか、モバイルではみ出さないか。 ブラウザのスクリーンショットで受け入れ確認は可能ですが、画像生成ツールは呼び出さないでください。 未完了のテストは正直に説明し、検証済みと主張しないでください。 最終納品物： 1. 実際に存在し、開くことができるHTMLファイル、または現在の環境がサポートするインタラクティブプレビュー。 2. スクリーンショットが可能であれば、実際のブラウザレンダリングのスクリーンショットを1枚添付。 3. 操作方法と必要な実行条件を簡潔に説明。 直接制作を完了してください。重要でない詳細については、一貫性のある設計判断を独自に行い、 自分で解決できる実装上の問題を繰り返しこちらに決定を委ねないでください。 ---