AI生成雨中便利店的网页 | GPT-6.1 sol，Gemini 3.8 flash，DeepSeek V4.1-Flash-1017
本文最后更新于 2026年11月8日 晚上
测试背景与提示词
用同样的提示词，让不同的AI生成一个雨中便利店的HTML页面。
提示词：1
2请制作一个雨夜便利店街角小场景，以第三视角观察整个场景，整体像一个可以自由拖拽、旋转、缩放观看的微缩三维模型 / 小型景观，没有任何UI界面元素。地面为一个完整的正方形底座，所有元素都搭建在这个底座上，构图紧凑、层次清晰，整体呈现出小巧、精致、可收藏的模型感。画面风格为三渲二，强调浓厚的日式二次元动画氛围，材质表现干净，轮廓明确，色彩柔和但富有夜景霓虹的层次感。
场景主体是一处日式便利店街角，便利店位于底座的视觉中心，外部有典型的日式街角元素：便利店招牌、玻璃橱窗、自动门、屋檐雨棚、门口地垫、自动贩卖机、自行车、雨伞架、垃圾桶、路灯、电线杆、电线、路牌、街角护栏、停车位、排水沟、积水路面、反光斑马线、小巷入口、空调外机、小型公告栏或海报栏等。街道不需要太大，但要有明确的街角转折感，像日本动画里常见的夜晚社区一角。整体模型制作完毕后，增加建筑入场动画，从地面开始慢慢组装模型元素等往上叠加，由散件组成完整场景的效果。不要人物，但便利店内部一定要有足够内容，并且可以透过大面积玻璃窗清楚看到店内。店内可见典型便利店陈设，要让便利店内部显得明亮、温暖、真实、充实
以下是GPT-6.1 sol、Gemini 3.8 flash、DeepSeek V4.1-Flash-1017 生成的结果链接：
评测环境与工具
- VSCode Codex - GPT-6.1 sol 轻度（Low）
- VSCode Antigravity - Gemini 3.8 Flash Low
- TRAE CN - DeepSeek V4.1-Flash-1017
模型生成效果对比
GPT-6.1 sol 效果
- 3D 方案选型与完整度
Three.js 与 OrbitControls 已打包，具备旋转、缩放、平移、阻尼和触屏控制，代码完整。无需拘泥于 three.min.js 的文件名。但当前是 HTML + 外部 JS，不是严格的单 HTML。 - 散件组装入场动效
确实实现了按时间错开的 position.y 上升和 scale 放大，带三次缓出。顺序包括底座、墙体、内饰、玻璃、屋顶及街角设施，约 3.7 秒完成。扣分在于以整组出现为主，散件逐个拼装的精细程度有限，后段设施入场时建筑尚未完全到位。 - 三渲二与雨夜氛围
有 1500 条雨线、积水色斑、扩散涟漪，以及冷暖配色。但主体使用 MeshStandardMaterial，没有使用卡通材质，也没有实现轮廓描边。地面粗糙度统一为 0.66，所谓反光主要由透明色斑模拟，没有实际映照建筑与招牌。 - 室内外透视与光影反差
玻璃设置 transparent: true、opacity: 0.1、depthWrite: false，具备透视条件。室内有独立暖色点光源、货架商品、后排冷柜、收银台和食品陈列，室外使用冷色照明。实现扎实，但屋顶和雨棚在默认俯视角下是否遮挡过多内景，需要截图确认。 - 细节密度与正方形底座
底座为 12×12，包含贩卖机、自行车、雨伞架、垃圾桶、护栏、电线杆、电线、停车线、排水沟及空调外机，内容丰富。但存在明确越界：右侧停车位横线最远到 x=7，底座边界只有 x=6。公告栏和商品也主要是简单几何体，精细程度有限。
Gemini3.8 flash 效果
雨夜便利店街角 | Gemini 3.8 flash 生成的页面
- 3D 方案选型与完整度
本地 bundle.js 包含 Three.js、OrbitControls 和 TWEEN，无需外部 CDN。旋转、缩放、阻尼和视角限制均有配置，代码完整。但仍是 HTML + 外部 JS，不是严格单 HTML；真实 WebGL 运行尚未验证。 - 散件组装入场动效
实现了从空中落下的 position.y 动画，以及从 0.001 恢复原尺寸的缩放，位置采用 Back.Out 回弹。检查确认四组最终均能归位。但只有地面、整栋便利店、全部街角器具、全部基础设施四组，墙体、货架、屋顶没有逐层组装，距离“散件叠加”要求有明显差距。 - 三渲二与雨夜氛围
实际使用 MeshToonMaterial，配有四阶渐变和最近邻采样；道路粗糙度 0.18、积水 0.05，并有 1800 条雨线、18 个动态涟漪。扣分点：描边函数只定义、没有调用；没有环境贴图或平面反射，低粗糙度可以产生灯光高光，不能据此认定有便利店倒影。 - 室内外透视与光影反差
正面和侧面都有玻璃，设置透明、opacity: 0.32、transmission: 0.85、关闭深度写入。内饰包括双面货架、冷柜、收银机、关东煮、咖啡机、香烟柜与杂志架，内容丰富。但室内点光源强度仅 2.2 和 1.2，结合 Three.js r187 的灯光衰减，存在照明不足风险；白色灯板本身不会照亮货架。 - 细节密度与正方形底座
底座约 20.4×20.4，有双贩卖机、自行车、雨伞架、垃圾桶、空调、箱筐、变压器、电表、垂落电线、护栏和路口反光镜，元素较丰富，主要构件从坐标看位于底座范围内。扣分在于商品主要靠平面贴图表达，自行车结构较简略，部分设备位置不合理。
DeepSeek V4.1-Flash-1017 效果
雨夜便利店街角 | DeepSeek V4.1-Flash-1017
- 3D 方案选型与完整度
已引入本地 Three.js r160 和 OrbitControls，入口包含渲染循环、窗口适配、旋转与缩放限制，代码组织完整。使用 three.module.js 是合理的模块化方案，不应仅因文件名不是 three.min.js 扣分。但项目依赖 src/ 和 lib/，不满足严格意义的单 HTML。 - 散件组装入场动效
有独立的 Assembly 系统，真实修改 position.y 和 scale，包含底部生长 rise、高处落下 drop、弹性放大 pop。底座从 0 秒开始，随后路面、建筑、室内、招牌、道具、电线陆续入场，最后引入雨效。扣分在于不少对象按整组缩放，例如墙体与屋顶设备一起生长，距离逐件搭建、逐层叠放还有差距。 - 三渲二与雨夜氛围
有 MeshToonMaterial、四阶明暗渐变和 EdgesGeometry 描边；雨效包含 1500 条 GPU 雨丝和 34 个循环涟漪，冷色雾与霓虹呼吸也有实现。主要不足是路面使用卡通材质，积水和倒影主要是透明加色贴片，没有低粗糙度湿地材质及真实场景反射。 - 室内外透视与光影反差
橱窗设置 transparent: true、opacity: 0.05、depthWrite: false；室内有四个暖色 PointLight 和一个冷色补光，并建有货架、冰柜、收银台等内容。室外采用冷色月光，冷暖对比的技术条件充分。 - 细节密度与正方形底座
主台面为 26 × 26，底座也是正方形；贩卖机、自行车、雨棚、电线杆、路灯、护栏、标线、井盖、空调等都有实现。自行车长约 1.8，店面宽约 11.7，比例没有明显失控。
综合对比
| 维度 | gpt6-1-sol | gemini3-8-flash-low | deepseek4-1flash1017 |
|---|---|---|---|
| 1. 3D 方案选型与完整度 | Three.js、OrbitControls 已打包，支持旋转、缩放和平移；HTML + JS 资源 | 本地打包 Three.js、OrbitControls、TWEEN，代码完整 | 本地 Three.js r160、OrbitControls，通过 import map 加载；模块组织清晰，但需要 HTTP 静态服务，不是单 HTML |
| 2. 散件组装入场动效 | 多组错时上升与缩放，建筑结构有先后 | 只有四个大组，整栋便利店连内饰一起落下 | 底座、地面、玻璃、门、招牌、内饰、道具等分别注册，支持 rise、drop、pop 三种动画；但墙体与屋顶仍在同组 |
| 3. 三渲二与雨夜氛围 | 标准材质，无描边；雨线、涟漪与透明色斑模拟湿地 | 分阶卡通材质、低粗糙度积水；描边函数未调用 | 四阶卡通材质，实际挂载边线；1500 条 GPU 雨线、34 个涟漪，按时间更新；但道路是卡通材质，积水与反光主要靠贴片模拟 |
| 4. 室内外透视与光影反差 | 透明玻璃、暖色点光源，较多立体商品 | 正侧面透明玻璃、内饰丰富，但室内点光源强度偏低，商品主要为贴图 | 玻璃透明度 0.05，四盏暖色点光源加冷柜补光；立体商品采用 InstancedMesh，货架、冷柜、收银区等内容充实 |
| 5. 细节密度与正方形底座 | 12×12 底座、设施较全；停车线明确越界 | 约20.4×20.4 底座，设施丰富，主要构件位于范围内 | 约26×26 底座，加入邻楼、后排建筑、小巷、屋顶设备和多种街角设施；空间层次更多，但也增加了抢占便利店主体的风险 |
按实现完整度，当前排序是 DeepSeek ＞ Gemini ＞ GPT。
DeepSeek 的优势主要来自更细的装配分组、实际生效的边线，以及更充实的场景层次。