Gemini 3做粒子交互特效很出圈?拿 TRAE SOLO 来实现一波!

大家好,我是不如摸鱼去,欢迎来到我的 AI 编程分享专栏。

前几天在家养病时刷抖音,刷到了很多用 Gemini 3做粒子交互特效的视频,感觉很不错,TRAE SOLO 正好也集成了 Gemini 3 pro ,今天就分享一下如何用 TRAE SOLO 快速制作一个告白粒子交互特效。

关于 TRAE SOLO 正式版

11 月 12 日 TRAE SOLO 正式版上线了,新增三栏布局、DiffView 工具、SOLO Coder + Plan,支持多任务并行等功能,在前几天集成了 Gemini 3 pro 也算是填补了 Claude Sonnet 4 的空白。

我可是 TRAE SOLO 老用户了,SOLO 模式(Beta 版)上线的时候我就拿到了 SOLO CODE,并且使用它完成了「复刻童年坦克大战」、「像老乡鸡那样做饭小程序」等实践,并且在实际工作中使用 TRAE 参与了很多任务的开发。如今正式版发布,而且集成了 Gemini 3 pro,自然要尝试一番。

想想做点什么

当刷到类似的视频的时候,我想可以做个《伍六七》里面的「以气御剪」或者「魔刀千刃」,后来想了想放弃了,那个模型应该好复杂😂。后面又想到《楚门的世界》,不知怎么突然想到的,里面有句台词:假如再也见不到你,祝你早安午安晚安。就拿这句台词来做个交互效果吧,假如你再也刷不到我的文章,再也不会给我点赞,祝你早安午安晚安(手动🐶)。

开始SOLO

准备

我们可以把自己当作一个小白,完全不懂应该如何实现这个粒子交互特效,但是要哪些功能和手势是我们需要提供的,我总结了需求如下:

md 复制代码
基于原生h5、浏览器、PC摄像头实现手势控制粒子特效交互的逻辑,粒子默认离散,类似银河系分布缓慢移动,同时有5种手势:

手势1: 握拳,握拳后粒子聚拢显示爱心的形状

手势2: 展开手掌并挥手,展开手掌挥手后粒子从当前状态恢复到离散状态

手势3: 👆 比 1 :只有食指伸直,其他 3 根弯曲,此时粒子聚拢显示第一句话:以防再也见不到你

手势4: ✌ 比 2 :只有食指和中指伸直,其他 2 根弯曲手此时粒子聚拢显示第二句话: 祝你

手势5: 👌 比 3 :只有中指、无名指、小指伸直,食指弯曲,此时粒子聚拢显示第三句话:早安,午安,晚安

然后打开 TRAE,切换到 SOLO Builder 模式,选择 Gemini-3-Pro 模型,当然也可以选择 GPT5 ,不过我感觉它不如 Gemini-3-Pro 好用。

SOLO

发送我们的需求给 TRAE SOLO

我们的需求很简单,它一轮就做出来了,并且会输出总结

我们可以看到它完整实现了需求中提到的功能,并且将技术栈和代码结构介绍得很清楚。

部署

在 TRAE 的中栏选择浏览器,并部署,它会帮我们把制作好的内容部署到 vercel 上

部署地址:traeproject1ckaf.vercel.app/

体验效果

效果还不错,符合需求了,哈哈。

总结

本次我们用TRAE SOLO 轻松实现了《早安午安晚安粒子交互特效》,可以看出 TRAE SOLO 正式版发布之后,功能上的增强还是不错的,还有很多我们本次没用到的功能例如 Plan 模式等也很有用,接入了 Gemini-3-Pro 后大模型的短板基本补上了。还有一点我们也可以从最近的更新动作上看出 TRAE 是想走大众编程的路线,它想让更多少基础和无基础的人也能使用到 AI 编程。我在这也希望国产的 AI 编程工具和大模型能更越来越好吧。

欢迎评论区沟通、讨论、分享👇👇

相关推荐
犹豫的果冻布丁4 小时前
从零给 DeepSeek Harness 写一个壁纸皮肤插件(已开源)
前端·后端
XDevelop AI智能应用软件开发4 小时前
AI演进下的“第五次软件危机”与软件工程重塑
人工智能·软件工程·ai编程·软件危机
黑科技iOS上架4 小时前
Qwen3.8-27B日常量化版在 Mac M5 32G配置上表现如何
经验分享·ai编程
漏刻有时4 小时前
数据可视化Three.js 3D 地图实战:单文件原生实现省域区县拉伸建模
前端
会说话的番茄4 小时前
AI 满嘴跑火车怎么办?给它配个"小抄"
前端·aigc
计算机魔术师4 小时前
AI 权力集中辩论实录:从「token 工厂」到「唯一幸存者」
前端
HelloDong4 小时前
AI 说「修好了」,凭什么信
人工智能·ai编程·claude
QCodingDev4 小时前
Spring AI Alibaba ReAct Agent实战:从Tool Calling到Agent,企业AI复杂业务该如何设计?
java·人工智能·agent·ai编程·spring ai
eric-sjq4 小时前
WanlyFrontend 中文声明式前端语言完全指南:让 0.6B 模型写出漂亮网页
前端
Full Stack Developme4 小时前
跨站请求伪造 (CSRF) 是什么 设计及工作原理
前端·okhttp·csrf