使用 Gemini3 编写 3D 星际穿越交互页面的经验分享

Gemini3 是一个强大的 AI 工具，可以用于编写复杂的 3D 交互式页面。使用 Gemini3 编写代码的关键在于提供详细且精确的提示词。以下是一个使用 Gemini3 编写 3D 星际穿越页面的例子，展示了如何通过精确的提示词来获得高质量的代码输出。

粒子系统

• 3000 个粒子，使用 THREE.Points
• 树形分布：圆锥体，高度 12，底部半径 3.8
• 高度公式：h = 12 * (1 - cbrt(random))，让底部更密
• 8% 的粒子强制放在底部边缘，形成清晰轮廓

着色器

• 呼吸效果：pos.y += sin(uTime 1.5) 0.05
• 颜色渐变：深紫 (0.3,0.1,0.3) → 粉色 (0.7,0.5,0.7)，按高度插值
• 随机闪烁：sin(speed * 50 + uTime) > 0.95 时混入白色

交互

• isTreeShape: boolean 控制聚散状态
• 聚拢动画 1.0s，散开动画 0.5s
• 使用 easing.damp() 做缓动

黑洞的编写则更为复杂，被拆分为 5 层结构：星空背景、粒子流、吸积盘、光子环和事件视界。每一层都有详细的参数和着色器逻辑，确保 AI 可以生成符合要求的代码。

视觉层级（从外到内）

1. 星空背景 - 5000 个星点
2. 粒子流 - 3000 粒子螺旋下落，到内圈后重生到外圈
3. 吸积盘 - 三层结构（主盘 + 上下弯曲的光弧）
4. 光子环 - 半径 1.3/1.35/1.4 的三层白环，toneMapped=false
5. 事件视界 - 黑色球体 + 菲涅尔边缘光

吸积盘着色器

float angle = atan(vUv.y - 0.5, vUv.x - 0.5);
float spiral = sin(angle 8.0 - dist 10.0 + uTime * 2.0);
颜色从内到外：白热 #fff8e0 → 橙红 #ff4400

坠入动画后期处理参数变化

阶段	Bloom	色差	暗角
idle	1.5	0.001	0.85
crossing	5~7	0.025	1.2

使用 Gemini3 编写 3D 交互式页面的感受：

1. 提示词越具体，AI 输出越稳定。模糊的需求只会得到模糊的代码。
2. 不是完全不用懂技术。你得知道 Three.js 大概是怎么回事，知道什么是着色器，才能把需求描述准确。但不用真的会写。
3. 迭代很重要。第一版出来肯定有问题，但改起来很快。告诉 AI “粒子太稀疏了，数量翻倍”，它直接就改了。
4. 复杂项目拆层写。像黑洞那种，我是一层一层让它生成的，最后再整合。一次性让它写整个项目容易乱。

代码已经开源，可以在 GitHub 上找到，有兴趣的可以去看看，主要是提示词那部分可能对大家有参考价值。