AI PROMPT ·
日本樱花谷 3D Web Prompt
请直接创建一个高保真的 3D 景观网页，可在浏览器中实时交互。 主题：日本樱花谷。 使用 HTML、CSS 和 JavaScript 实现。不要生成图片，不要仅提供设计方案， 不要用背景图片加视差效果来伪造 3D。我想要一个真正可运行、可探索的产品。 [1. 产品定位] 这是一个完整的、具有深度层次的连续山谷景观， 而不是孤立的小装饰品、浮岛、带底座的沙盒或简单的技术演示。 风格为现代精细体素艺术： 保留立方体几何的建模语言，但屏幕应为高分辨率、抗锯齿，并具有细腻的光影。 没有复古低分辨率像素化，没有粗糙的方块堆叠，没有应用于屏幕的像素滤镜。 视觉质量优先。宁可功能少一些，也不要牺牲构图、材质和光照。 [2. 参考图片的使用] 如果附带了参考图片，首先理解其构图层次、比例、光照和色彩关系。 仅借鉴氛围和视觉语言，重新设计场景， 不要复制建筑物、树木、山脉和道路的位置，不要 1:1 复刻。 参考图片不是网页中的背景素材。场景本身必须由真实的 3D 几何体组成。 [3. 场景构图] 默认打开时，应呈现一幅完整、吸引人的画面， 用户无需先旋转相机寻找好角度。 使用透视相机，而非沙盒式的等距俯视相机。 画面有清晰的前景、中景和背景： 前景： 一棵具有存在感的古老樱花树，结合岩石、植被、石灯笼和一些飘落的花瓣， 在屏幕边缘形成自然框架，但不能遮挡河流、桥梁和主要建筑。 中景： 蜿蜒的河流引导视线进入画面，一座红色木桥横跨河流； 村庄、茶馆、神社和小径沿地形分布，建筑物之间有真实的通行关系。 地面有起伏、岸线和自然过渡，而不是模型均匀放置在平面上。 背景： 山坡上的多层塔楼、不同距离的森林和山脊，以及远处的雪山。 通过比例变化、遮挡、冷暖变化和大气透视来表达距离感， 而不仅仅是缩小远处物体。 不要将所有元素均匀散布。需要主次、疏密、留白和清晰的视觉焦点。 [4. 建模与画面质量] 樱花树： 树干有弯曲、分叉和根部，树冠由不规则的花簇组成， 有空隙、厚度变化和可见的树枝。不要做成几个规则的球体或块状团簇。 建筑物： 屋顶有分层瓦片、屋檐、梁、柱和窗格； 不同的建筑物在用途、体量和高度上有差异，不要复制同一栋房子来填满山谷。 地形： 岸线有湿润的石头、草和植被过渡。 避免过于规则的台阶、重复条纹、棋盘格和明显的程序化生成网格。 水面： 必须能反射周围景色，具有适度的涟漪、深度变化和岸线过渡。 尽量使用实际场景反射；即使需要性能降级也要保持视觉可信度。 不要用闪烁噪声、强扭曲或整个蓝色平面来代替水。 细节： 可以有一些锦鲤、落花、萤火虫、瀑布和远处的鸟， 但它们都应服务于氛围，不能使画面显得嘈杂。 不要为了声称模型数量而堆积细节。 [5. 色彩与氛围] 默认为蓝调时刻（Blue Hour）： 冷色调的山谷和远山，柔和粉色的樱花，温暖但不过曝的灯笼和窗户灯光。 暖光集中在人们活动的地方，不要将整个环境染成橙色。 需要柔和阴影、物体接触点的明暗对比、合理的曝光， 克制的泛光、抗锯齿，以及带有距离层次的薄雾。 避免发白、雾霾、过饱和、全屏浓雾、过曝灯光和明显的锯齿。 方块几何可以清晰，但渲染本身不能粗糙。 同时提供“清晨”和“雨天”氛围； 切换时，同步改变天空、环境光、雾和本地效果， 而不仅仅是修改背景颜色。 [6. 交互与界面] 提供四个设计的相机视角： 山谷全景、河边低位、寺庙小径、山坡俯瞰。 切换应平滑，每个相机都需要独立的构图价值。 基本交互： 鼠标拖动观察，滚轮缩放或前进，触摸屏支持拖动和双指缩放。 提供重置视图、隐藏界面和保存当前屏幕的功能。 可选增强： 自由探索、缓慢相机巡航、环境音。 环境音默认关闭，仅在用户主动点击后播放。 额外功能不能影响默认画面的完整性。 界面应克制且经过设计，聚焦于景观。 标题和控制栏放置在边缘，不遮挡视觉焦点。 桌面端和移动端不能有按钮溢出、文本重叠或无法操作的问题。 [7. 工程与性能] 允许使用 Three.js / WebGL，以及版本固定、相互兼容的 CDN 依赖。 优先考虑成熟的渲染能力，不要为了“零依赖”而重写整个引擎。 自写的 HTML、CSS、JavaScript 应尽量组织在一个 HTML 文件中。 风景由程序化几何体和材质生成，不依赖外部图片或 3D 模型资源。 重复对象使用合适的批处理或实例化绘制方法； 合理控制细分、阴影、反射和渲染分辨率。 提供高质量和轻量模式，手机默认使用较轻的设置。 不要以无限增加体素数量来换取细节。 添加加载提示、WebGL 不支持提示和必要的错误处理。 如果未启用声音，则不要自动播放；尊重系统减少动态效果的偏好。 [8. 交付前验收] 写完代码后不要立即交付。 如果当前环境支持浏览器运行和截图，请先实际打开页面， 检查默认相机、四个视图、氛围切换、桌面和移动布局， 然后根据截图纠正明显的构图、曝光、遮挡和渲染问题。 关键检查项： 是否有空白屏幕、加载失败、控制台错误； 是否有裁剪、闪烁、阴影带状伪影、过曝、水面异常； 默认画面是否看起来像完整的景观，而不是一个小沙盒； 功能按钮是否真正可用，移动端是否有溢出。 可以使用浏览器截图进行验收，但不要调用图像生成工具。 如实陈述未完成的测试，不要声称已验证。 最终交付： 1. 一个实际存在的、可打开的 HTML 文件，或由当前环境支持的交互式预览。 2. 如果可以截图，附上真实的浏览器渲染截图。 3. 简要说明操作方法和必要的运行条件。 请直接完成制作；为非关键细节自行做出一致的设计选择， 不要将你能解决的实现问题反复抛回给我做决定。
PROMPT
请直接制作一个可以在浏览器中实时交互的高完成度 3D 景观网页。 主题：日式樱花山谷。 使用 HTML、CSS、JavaScript 实现。不要生成图片，不要只给设计方案， 不要用一张背景图加视差效果冒充 3D。我要的是实际可运行、可游览的成品。 【一、作品定位】 这是一片完整、连续、有远近层次的山谷景观， 不是孤立的小摆件、悬浮岛、带底座的沙盘，也不是单纯的技术演示。 风格是现代精细体素 / voxel art： 保留立方体几何的造型语言，但画面应高分辨率、抗锯齿、光影细腻。 不要复古低分辨率像素化，不要粗大积木堆砌，不要给画面套像素滤镜。 视觉质量优先。宁可少几个功能，也不要牺牲构图、材质和光照。 【二、参考图的使用方式】 如果附有参考图，请先理解它的构图层次、尺度、光线和色彩关系。 仅借鉴氛围与视觉语言，重新设计场景， 不要照搬建筑、树木、山体和道路的位置，不要 1:1 复刻。 参考图不是网页里的背景素材。场景本身必须由真实 3D 几何构成。 【三、场景构图】 默认打开时就应呈现一幅完整、有吸引力的画面， 不需要用户先旋转镜头才能找到好看的角度。 采用透视相机，而不是沙盘式等距俯视相机。 画面有明确的前景、中景、远景： 前景： 一株有存在感的古老樱花树，配合岩石、草木、石灯笼和少量落花， 形成画面边缘的自然框景，但不能挡住河流、桥和主要建筑。 中景： 一条蜿蜒河流引导视线进入画面，红色木桥横跨河面； 村落、茶屋、神社和小径顺着地势分布，建筑之间有真实的通行关系。 地面有起伏、岸线和自然过渡，不是平面上均匀摆放模型。 远景： 山坡上的多层塔、不同距离的森林和山脊，以及远处的雪山。 用尺度变化、遮挡、冷暖变化和空气透视表现距离， 而不是仅仅把远处物体缩小。 不要把所有元素均匀铺满。需要主次、疏密、留白和清楚的视觉焦点。 【四、造型与画面质量】 樱花树： 树干有转折、分叉和根部，树冠由不规则花簇组成， 有间隙、厚薄变化和可见枝条。不要做成几个规则球体或方块团。 建筑： 屋顶有层叠瓦片、挑檐、梁柱和窗格； 不同建筑有用途、体量和高度差异，不要复制同一栋房子铺满山谷。 地形： 岸边有湿润石块、草丛和植被过渡。 避免过于规律的台阶、重复条纹、棋盘格和明显的程序生成网格。 水面： 必须能够反映周围景物，具有适度的波纹、深浅变化和岸边过渡。 尽量使用实际场景反射；需要性能降级时也应保持视觉可信。 不要用闪烁噪声、强烈扭曲或一整块蓝色平面代替水。 细节： 可以有少量锦鲤、落花、萤火虫、瀑布和远处飞鸟， 但都应服务于氛围，不能让画面显得嘈杂。 不要为了宣称模型数量而堆砌细节。 【五、色彩与氛围】 默认是蓝调时刻： 偏冷的山谷与远山，柔和的粉色樱花，温暖但不过曝的灯笼和窗光。 暖光集中在有人活动的地方，不要把整个环境染成橙色。 需要柔和阴影、物体接触处的明暗、合理的曝光、 克制的泛光、抗锯齿和有距离层次的薄雾。 避免发白、灰蒙、过度饱和、满屏浓雾、过曝灯光和明显锯齿。 方块几何可以清晰，但渲染本身不能粗糙。 另提供“清晨”和“雨中”两种氛围； 切换时应同步改变天空、环境光、雾和局部效果， 不是仅仅修改背景颜色。 【六、交互与界面】 提供四个经过设计的镜头： 山谷全景、河边低机位、寺庙小径、山坡俯瞰。 切换应平滑，每个镜头都需要有独立的构图价值。 基础交互： 鼠标拖动观察、滚轮缩放或前进，触屏支持拖动和双指缩放。 提供重置视角、隐藏界面和保存当前画面的功能。 可选增强： 自由探索、缓慢镜头巡游、环境音。 环境音默认关闭，只在用户主动点击后播放。 额外功能不能影响默认画面的完成度。 界面要克制、有设计感，以景观为主。 标题和控制条放在边缘，不遮挡视觉焦点。 桌面和手机都不能出现按钮越界、文字重叠或无法操作的问题。 【七、工程与性能】 允许使用 Three.js / WebGL，以及版本固定、互相兼容的 CDN 依赖。 优先使用成熟渲染能力，不要为了“零依赖”重写整套引擎。 自写的 HTML、CSS、JavaScript 尽量整理在一个 HTML 文件中。 景物由程序化几何和材质生成，不依赖外部图片或 3D 模型资源。 重复物体采用适合的批量或实例化绘制方式； 合理控制细分、阴影、反射和渲染分辨率。 提供高画质和轻量模式，手机默认使用较轻设置。 不要靠无限增加体素数量换取细节。 加入加载提示、WebGL 不支持时的提示和必要的错误处理。 没有开启声音时不要自动播放；尊重减少动态效果的系统偏好。 【八、交付前验收】 不要写完代码就立即交付。 如果当前环境支持浏览器运行和截图，请先实际打开页面， 检查默认镜头、四个视角、氛围切换、桌面和手机布局， 再根据截图修正明显的构图、曝光、遮挡和渲染问题。 重点检查： 是否存在空白画面、加载失败、控制台错误； 是否有穿模、闪烁、阴影条纹、过曝、水面异常； 默认画面是否真正像完整景观，而不是小型沙盘； 功能按钮是否实际可用，移动端是否越界。 可以使用浏览器截图验收，但不要调用图像生成工具。 没有完成的测试要如实说明，不要声称已经验证。 最终交付： 1. 实际存在、可以打开的 HTML 文件，或当前环境支持的交互预览。 2. 如能截图，附一张真实浏览器渲染截图。 3. 简短说明操作方式和必要的运行条件。 请直接完成制作；非关键细节自行作出一致的设计选择， 不要把可以自行解决的实现问题反复交给我决定。