Gemini手搓3D粒子特效，体验现实版钢铁侠

【导读】无需懂一行代码，Gemini 3正在重塑3D交互创作的边界！详细对比了Canvas与AI Studio在开发场景下的独特优势，带你亲身体验这场「零门槛」的3D交互革命。

Gemini 3的威力其实并没有被很多人真正的意识到。

最近，el.cine演示了如何仅通过简单的提示词，生成一个实时交互的3D粒子系统。

用户可以通过摄像头检测双手张合的手势来直接控制粒子群的缩放和扩散。

用同款提示词在Gemini Canvas试了一下，简直惊掉了下巴。

还可以升级，现在是识别一只手，可以识别两只手，把粒子完全分开。

完全就是AR级别的控制效果，感觉我就是钢铁侠本侠。

提示词非常简单：

提示：使用Three.js创建一个实时交互的3D粒子系统。

要求：

1、通过摄像头检测双手的张合与握紧，控制粒子群的缩放与扩散。

2、提供可选择心形/花朵/土星/佛像/烟花等模板的。

3、面板支持通过颜色选择器调整粒子颜色粒子。

4、需实时响应手势变化，界面设计简洁现代界面设计简洁现代。

整个过程完全无需编程基础，只需在Gemini中输入提示词即可。

这一成果不仅震惊了有经验的程序员（他们曾需花费数周学习GLSL着色器），更标志着复杂3D交互内容的创作门槛被彻底消除，被认为是正在见证的历史性时刻。

而且这个效果，只有Gemini能够「直出」这个效果。

就连谷歌AI Studio自带的Build也不能一次性跑出这么好的结果。

然后Gemini里自带的Canvas，还自带了控制台和代码Fix。

这还要什么Cursor！

第一次跑就这个结果，我以为大家都是这样，然后用了其他几个AI工具。

都没有Gemini跑出来的惊艳。

甚至有些直接就无法使用。

作者原来的例子效果也看起来要好一点。（怀疑是进行了多轮对话以后的结果）

被低估的Canvas

其实很多人还是低估了Canvas的威力了。

比如你想裁剪最近很流行的表情包。

如果直接使用Nano Banana Pro去截图，往往有种「大炮打蚊子」的感觉。

但是如果你先用Canvas做一个截图小工具，甚至还可以选择几行几列的截图，最后还能打包好后下载为zip压缩包。

Canvas是集成在Gemini网页版中的一个功能界面，对标的是OpenAI的Canvas和Anthropic的Artifacts。

核心机制：侧边栏的独立渲染

在传统的ChatGPT界面中，代码和文本是混在对话流里的。如果你想修改一段生成的代码，通常需要「复制-粘贴-修改-再粘贴」。

Canvas的逻辑是：将「对话（Chat）」与「内容（Content）」分离。

左侧：你的对话指令区。

右侧：一个独立的编辑器/渲染器窗口。

Canvas的三大技术杀手锏

这次3D粒子系统之所以能跑通，Canvas的功劳占了一半：

HTML/JS/React实时渲染环境：Canvas就像在浏览器里内置了一个轻量级的IDE。它不仅能显示代码，还能直接运行前端代码。对于WebGL（如Three.js）这种依赖浏览器环境的库，Canvas提供了原生的执行沙箱，这使得调用摄像头（WebcamAPI）变得非常顺滑，而不需要像以前那样把代码复制到本地服务器运行。

针对性的代码修复（FixButton）：不同于普通的「重新生成」，Canvas允许你高亮右侧的一段代码或文本，然后告诉AI：「把这里的逻辑改一下」。它只针对局部进行微调，而不是重写全文。这对于调试复杂的3D渲染逻辑至关重要。

多模态的即时反馈：它支持生成图表、网页原型、文档。当你输入「把背景改成黑色」时，右侧的Canvas是实时刷新的，这种低延迟的反馈循环大大降低了试错成本。

适用人群：产品经理、前端设计师、数据分析师、轻量级代码编写者。

被低估的AI Studio

而另一个更被低估的就是AI Studio，AI Studio可以说是开发者的「核武库」。

如果说Canvas是装修精美的样板间，那么谷歌AIStudio就是堆满工具和原材料的施工现场。

它是目前访问Gemini API最快、最直接的路径。

核心定位：模型调试与Prompt Engineering

AI Studio不是为了让你聊天，而是为了让你构建应用。

之前的例子中提到AI Studio的Build功能跑分不如Gemini Canvas，这其实是因为两者的侧重点不同。

AI Studio的硬核特性:

超长上下文（Context Window）：这是AI Studio的杀手锏。

它支持Gemini 1.5 Pro的200万token上下文。你可以把整本技术文档、几小时的视频、或者整个项目的代码库直接拖进去。

• 对比Canvas：Canvas的上下文虽然也长，但为了响应速度做了截断和优化；AI Studio则是「生吞」海量数据。

System Instructions（系统指令）：在AI Studio里，你可以设置通过「系统指令」来定义模型的角色、语气和输出格式。这比在聊天框里说「你现在是一个xxx」要稳定得多，权重更高。

多模态原生输入：你可以上传一段40分钟的视频，AI Studio不会将其转化为文本字幕，而是直接「看」视频的每一帧。这对于视频理解、音频分析任务是降维打击。

Prompt Caching（提示词缓存）：对于开发者来说，这能极大降低API调用成本和延迟。如果你的Prompt有一部分是固定的（比如一本巨大的规则书），AI Studio允许你缓存这部分内容。

适用人群：能够写Python/Node.js的开发者、企业级应用构建者、需要处理海量数据的研究人员。

而且官方给出了很多高质量的Vibe Coding作品库。

案例很多：

• 涵盖了近100多种Vibe Coding作品；

• 包含图像生成、视频创作、游戏开发、文本处理、代码生成等多领域；

• 都是些很惊艳的范例：如漫画生成器、电商产品摄影棚、像素艺术场景生成、YT视频转互动学习应用。

比如可以在网页里玩跑酷。

或者在网页中生成4K高清壁纸。

还有很多例子，都是非常棒的Vibe Coding模板。

不过为什么上面那个粒子效果AI Studio不如Canvas呢？

大概猜一下，这涉及到底层的运行环境策略：

1. Canvas的优化目标是「一次性交付」：

   谷歌对Canvas模式下的模型进行了微调（Fine-tuning），强化了它生成完整、可运行的前端代码的能力，并自动补全了许多 Web 环境下的依赖库。

2. AIStudio的环境更「裸」：

   AI Studio的预览功能主要是为了测试 API 的输出，它的沙箱环境并没有像 Canvas 那样针对流行的前端库（如 Three.js, React, Tailwind）做极致的预加载和兼容性优化。

最后，简单总结就是：

如果你想要一个结果（比如一个能玩的 3D 网页），用Gemini Canvas。

如果你想要基于这个结果开发一个APP（比如获取它的 API 调用逻辑，集成到你自己的服务器），用AIStudio。

想要体验上述粒子效果可以把下面代码拷贝到HTML单文件中，用浏览器打开即可。

html>

参考资料：

https://aistudio.google.com/apps

秒追ASI

⭐点赞、转发、在看一键三连⭐

点亮星标，锁定极速推送！