如何通过 Gemini 2.5 Pro 实现 3D 应用程序的氛围编程

Gemini 2.5 Pro 内置编辑器支持“氛围编程”:上传蛋糕图片后,用自然语言指令即可生成可交互的 Three.js 3D 蛋糕可视化应用,实时调整颜色、装饰、层数、动画,并同步更新价格估算,所有修改即时预览。

发布于2025年4月30日 08:17
编辑零重力瓦力
评论0
阅读39

如今,大部分代码 IDE 都支持氛围编程(vibe coding)。实际上,如果应用程序的规模不大,完全可以直接使用模型自带的编辑器来操作。比如,可以在 Gemini 2.5 Pro 的内置编辑器中,通过自然语言指令沉浸式地开发一个基于 three.js 的 3D 蛋糕制作应用。

以下是您提供的内容,经过格式整理和翻译后的版本。每段均为英文在上,中文在下 ,方便对照阅读。

🟦 初始要求

上传一张蛋糕的图片,然后输入以下提示语

Based on this design, can you create a 3D interactive cake visualizer in three.js that is configurable?
根据这个设计,你能用 Three.js 创建一个可配置的 3D 交互蛋糕可视化工具吗?

I want to be able to change things like:
我希望可以更改以下内容:

1. color of the cake
蛋糕的颜色

2. the color of the flowers
花朵的颜色

3. the topper of the cake (nothing, star, sphere)
蛋糕顶部装饰(无、星星、球形)

4. whether there is pearl ribbing along the outside of the cake or not
蛋糕外部是否有珠状滚边装饰

5. the placement of the flowers on the cake.
蛋糕上花朵的位置摆放

6. As these things are selected, there should be a price estimator that changes as different options are selected.
当这些选项被选择时,应该有一个价格预估器会随着不同选项的更改而变化。

Also, as the user changes something in the menu, instead of the cake just switching instantly, make it animate! Show the cake layers stacking up quickly, and then have the decorations appear one by one, starting from the bottom. The animation should be pretty quick, and the user should still be able to spin the cake around while it's happening.
此外,当用户在菜单中更改某些内容时,不要让蛋糕立刻切换状态,而是添加动画效果!展示蛋糕层快速堆叠起来的过程,然后从底部开始依次出现装饰。动画应较为迅速,同时用户在动画进行时仍能旋转蛋糕查看各个角度。

🔴 第一次修改

Make sure that the cake color actually changes as I go, and make sure that there are actual flowers. Currently there are none.
请确保当我进行操作时,蛋糕颜色确实会发生变化,并且确保真的有花朵出现。目前还没有花朵。

🟡 第二次修改

Make the cake topper better. Currently it is super small and it needs to be scaled appropriately.
请优化蛋糕顶部装饰。当前太小了,需要适当调整大小。

🟢 第三次修改

1. Make sure the cake topper is sitting on top of the cake.
确保蛋糕顶部装饰确实位于蛋糕顶部。

2. Make the amount of cake layers customizable.
让蛋糕层数可以自定义。

3. Change the estimated price by lowering it by 50% overall.
将整体的价格预估降低 50%。

🔵 第四次修改

The cake topper isn't appearing any more. Make sure it appears on the top of the cake.
蛋糕顶部装饰现在不显示了,请确保它出现在蛋糕顶部。

Gemini 的编辑器不仅可以直接生成和编辑代码,还能预览代码执行的效果,非常方便。

相关文章

Windsurf 2.0 拆解:Devin 被塞进编辑器,氛围编程终于有了“调度中心”
AI 编程开发
2026年6月2日
0 条评论
零重力瓦力

Windsurf 2.0 拆解:Devin 被塞进编辑器,氛围编程终于有了“调度中心”

Cognition 发布 Windsurf 2.0,深度整合 Devin 实现本地思考与云端执行分工。新版推出 Agent Command Center 支持多智能体可视化管理,搭载自研 SWE-1.5 模型大幅提升代码定位与编辑速度,并引入 Spaces 容器解决上下文延续问题。Pro 版调整为日配额制且包含 Devin 功能。相比 Cursor 3,Windsurf 2.0 凭借自研模型与云端执行能力,更适合处理陌生代码库及长任务自动化场景。

#智能体#AI 编程
阅读全文
Claude Opus 4.8 震撼发布,多智能体协同让开发效率翻倍
AI 新闻资讯
2026年6月1日
0 条评论
小创

Claude Opus 4.8 震撼发布,多智能体协同让开发效率翻倍

Anthropic 发布 Claude Opus 4.8,在基准测试中超越 ChatGPT 5.5,重夺编程领域领先地位。新版本核心亮点为动态工作流与 Ultracode 模式,通过多智能体协同大幅提升复杂任务开发效率,同时幻觉率降至四分之一。得益于算力扩充,其性能提升且价格下调,快速模式费用降至三分之一。建议开发者日常使用常规上下文模式并调高努力程度,大项目再开至最大。此外,AI 时代专注力仍是拉开差距的关键。

#Claude#AI 编程
阅读全文
一段代码让网站出海,这个 AI 翻译工具把多语言 SEO 玩明白了
AI 产品工具
2026年6月1日
0 条评论
小创

一段代码让网站出海,这个 AI 翻译工具把多语言 SEO 玩明白了

跨境电商网站常因语言壁垒导致高跳出率。Weglot 是一款 AI 翻译工具,仅需几分钟即可通过添加脚本实现网站多语言本地化,且保持原有排版。该工具支持可视化编辑、术语表锁定及团队协作,便于后续维护。同时,它能自动优化 hreflang 标签、独立 URL 及元数据,解决多语言 SEO 难题。借助母语内容布局小语种市场,企业可以低成本获取流量红利,有效提升海外转化率。

阅读全文
互动讨论

评论区

围绕《如何通过 Gemini 2.5 Pro 实现 3D 应用程序的氛围编程》展开交流,未登录用户可浏览评论,登录后可参与讨论。

评论数
0
登录后参与评论
支持发表观点与回复一级评论,互动后将同步到消息中心。
登录后评论
暂无评论,欢迎成为第一个参与讨论的人。