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 编程工具和大模型能更越来越好吧。

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

相关推荐
foundbug9995 小时前
Modbus协议C语言实现(易于移植版本)
java·c语言·前端
Luna-player5 小时前
在前端中list.map的用法
前端·数据结构·list
用户47949283569155 小时前
面试官问 React Fiber,这一篇文章就够了
前端·javascript·react.js
LYFlied5 小时前
【一句话概述】Webpack、Vite、Rollup 核心区别
前端·webpack·node.js·rollup·vite·打包·一句话概述
reddingtons5 小时前
PS 参考图像:线稿上色太慢?AI 3秒“喂”出精细厚涂
前端·人工智能·游戏·ui·aigc·游戏策划·游戏美术
一水鉴天5 小时前
整体设计 定稿 之23+ dashboard.html 增加三层次动态记录体系仪表盘 之2 程序 (Q199 之2) (codebuddy)
开发语言·前端·javascript
刘发财5 小时前
前端一行代码生成数千页PDF,dompdf.js新增分页功能
前端·typescript·开源
_请输入用户名5 小时前
Vue 3 源码项目结构详解
前端·vue.js
少卿5 小时前
Next.js 国际化实现方案详解
前端·next.js