自从去年11月份发布了Gemini3后，不断有各路大神在抖音分享他们使用效果，相信你也见过那他们用Gemini3实现的粒子聚散，还能支持手势识别进行交互的效果。
其核心就是运用Three.js（基于WebGL的3D效果JS库）+ MediaPipe 手势识别。
Three.js，能实现一些复杂的图形控制效果，包括地图、三维、粒子控制都可以利用它来实现。广为人知的清华大学人工智能学院官网（https://collegeai.tsinghua.edu.cn/）就是运用到这一技术。
而MediaPipe对web支持度不是很好，手势识别多用于APP或桌面应用，咱们网页适用场景很少。
碰巧最近输出的AI创作助手官网专题页（https://www.powereasy.net/products/aicreative），用这一技术实现比较贴题。小试牛刀效果还不错。
说回Gemini3，目前我所知国内使用有以下几种方法
1、通过Gemini3官方平台或Gemini AI Studio官方开发平台。（需要科学上网，有一定限额，需要google帐号且不支持中国地区帐号）
2、Antigravity，Google的AI原生集成开发坏境。（同样需要科学上网，不支持中国地区帐号，要更改地区）
3、lmarena，AI Battle 网站（需要科学上网，无需帐号，但不支持多次对话深度考虑，不适合做项目）
4、Trae 国际版 （无需科学上网，免费的排队时间超长，处理一个提问往往需要半天时间，建议开通会员）
5、还有Zenmux、Flowth、Direct Chat等五花八门的国外平台接入的。
那么咱们网页上如何利用AI实现这种粒子效果呢？
我们其实我们只需要一个提示词：
[ 制作一个HTML引导页，用 Three.js 创建一个 Logo 粒子效果，粒子从分散到聚合。 ]
生成完毕后，你会获取一个网页。
这个时候你可以通过Live Server 打开这个页，进行查看
然后你会获得这样的效果。
要摆脱对Live Server依赖，我们需要引入three.js库
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
可以下载到本地服务器带版权本地引用。
然后我们通过其代码进行微调，包括粒子数量，定位，偏移值等等，最后应用到我们的实际项目之中。
