React Three Fiber结合AI生成3D交互场景

更新（2026/01/12）：打造一个疯狂的过山车建造器 ↓ 🙀如何打造一个疯狂的过山车建造器（🎢RollerCoaster.js + React Three Fiber + AI）

更新（2025/12/30）：新增「过山车噩梦」😨

你什么时候会感到兴奋和快乐？如今，我完全沉迷于尝试最新、最热门的 IT 技术。但小时候，我觉得坐过山车特别有趣、特别刺激。🎢 然而，过山车转瞬间就结束了，就像一场短暂的梦。所以，我编写了一段代码，让我们在家也能永远享受坐过山车的刺激！🚀

我找到了一个非常适合实现这个计划的库：RollerCoaster.js。它真是一个相当小众的库。在 Three.js 官方网站上，有一个使用该库的示例（Three.js 是最流行的 3D 库）。

过山车 Demo ↓

过山车 Demo 的 GitHub 仓库 ↓

此外，这里还有 RollerCoaster.js 的 GitHub 仓库。↓

这个库的主要功能是 RollerCoasterGeometry，你可以用它轻松创建逼真的过山车轨道。↓

在 AI 的帮助下，我制作了一个过山车 CodePen 示例，并添加了对新手友好的注释。我对 Three.js 官方示例中的代码进行了精简，让初学者更容易理解。我使用 React Three Fiber 处理 3D 动画。它是 Three.js 的一层封装，让我们可以更轻松地在 React 中使用 Three.js。

这段动画的有趣之处之一，是过山车下坡时会加速，上坡时则会减速。你可以在下面这部分代码中调整速度。↓

// Clamp velocity between min and max (prevent too slow or too fast)
velocityRef.current = Math.max(0.00004, Math.min(0.0002, velocityRef.current));

你还可以调整轨道路线。轨道的形状由使用正弦和余弦的参数方程控制：

const x = Math.sin(t * 3) * Math.cos(t * 4) * 50;
const y = Math.sin(t * 10) * 2 + Math.cos(t * 17) * 2 + 5;
const z = Math.sin(t) * Math.sin(t * 4) * 50;

t * 后面的数字控制 Frequency（频率，也就是波浪或环路的数量）：

频率越高 = 波浪或环路越多 → 轨道越复杂

频率越低 = 波浪或环路越少 → 轨道越平滑、越简单

以 Y 轴（垂直运动）为例：

const y = Math.sin(t * 10) * 2;  // 10 ups and downs per loop
const y = Math.sin(t * 2) * 2;   // Only 2 ups and per loop

你可以这样理解：想象一下，一开始只有一条简单的环形路线，就像赛车场的跑道。然后：

X 方程添加水平方向的扭转，也就是左右蜿蜒。

Y 方程添加垂直方向的山丘，也就是上下运动。

Z 方程添加纵深方向的曲线，也就是前后盘旋。

因此，频率越高，形成的图案就越复杂。

彩虹过山车🌈

好了，让我们把过山车变得更有趣、更刺激吧！😆 我把轨道颜色改成了彩虹色，并将背景改造成布满彩色星星的太空。我添加了 CSS linear-gradient 来营造基础的太空氛围，又使用 radial-gradient 制造雾气效果。↓

/* 🌌 DEEP SPACE BASE - Simple black to dark purple gradient */
background: linear-gradient(to bottom, #000000 0%, #0d0019 100%);

/* VIGNETTE: Dark edges fade to transparent center
   - Creates depth and atmospheric "fog" effect
   - Very dark with subtle purple hint (10, 0, 20) = almost black
   - 0.4 opacity = subtle, professional atmosphere
*/
background: radial-gradient(
  ellipse at center,
  transparent 0%,
  transparent 40%,
  rgba(10, 0, 20, 0.4) 100%
);

你可以通过修改 i 来调整星星的数量。↓

for (let i = 0; i < 500; i++) {

你也可以通过修改 size 来调整星星的大小。↓

const size = Math.random() * 0.5 + 0.3; // Random size 0.3 to 0.8

它看起来是不是很像梦境中的过山车？增加星星的数量并放大星星，会让整条轨道呈现出截然不同的氛围。↓

过山车噩梦😨

我制作了一个噩梦版过山车。我增大了所有 t * 部分的数值，加入更多上下起伏和更急促的弯道，从而打造出一条疯狂、极限的轨道。此外，我还提高了速度，让它更加惊险刺激。我也把轨道改成了从红色到黑色的渐变，并调整了 CSS gradient，让中央明亮、边缘昏暗，以营造阴森恐怖的效果。

另外，为了学习，我还制作了一个 Svelte 版本。我使用 Threlte 处理 3D。它是 Three.js 针对 Svelte 的一层封装，可以让我们更轻松地在 Svelte 中使用 Three.js。与 React 相比，Svelte 有很多优势，例如代码更简单、代码量更少、bundle 体积更小，以及性能更好。

<!-- Svelte -->
// Declare state
let velocity = 0.00004;
// Update state
velocity += 0.001;  // Just assign!

// React
// Declare state
const [velocity, setVelocity] = useState(0.00004);
// Update state
setVelocity(v => v + 0.001);  // Need setter function

我原本想分别制作默认版和彩虹版过山车的 CodePen 示例，以比较 Svelte 与 React 之间的差异。但我无法在 CodePen 中使用 Threlte，于是接着尝试了 StackBlitz。Threlte 在那里可以正常运行，但 StackBlitz 启动起来需要一些时间……无论如何，我还是会把代码贴出来。

默认版过山车 ↓

彩虹版过山车 ↓

以这些代码为基础，我还有一些未来的更新构想。😆

• 为过山车和星星添加更多动画。

• 为过山车和星星加入更多物理效果。

• 制作一个 UI，让你无需修改代码，就能以可视化方式创建自己的轨道。

关于动画与 AI 的更多内容

我之前写过有关 2D/3D 动画的文章，如果你想进一步了解 2D/3D 动画，也可以参考它们。↓

《（通过 🖼️Meme 图片学习）如何使用 🧠AI 创建 🎨3D 动画（React Three Fiber vs Three.js vs A-Frame + GSAP）》

《（🧐我制作了一个可能会让你盯着看上一阵子的网站动画（GSAP）🎨）》

此外，下面是我写过的一些 AI 相关文章 ↓

《（🧠如何让 Codex 像过去优秀的 Claude Code 一样改善你的心情（找回“You're absolutely right!”）🤖》

《（🤖🤖如何轻松、免费地并行运行 AI（Git Worktree Runner）🧠🧠》

《（🤖如何免费让 AI 更严格地遵循你的指令（OpenSpec）📝》

《（🧠如何免费、更高效地使用 AI（Serena MCP）🧐》

坐过山车既有趣又刺激。我不可能无休止地乘坐真正的过山车，但现在，我可以永远坐在虚拟过山车上了。制作动画真的超级有趣，我也很想继续深入学习！😊

希望你能从这篇文章中有所收获。感谢阅读。祝你用 AI 编程愉快！🧠 You're absolutely right!🤖

你对 2D/3D 动画有什么好点子吗？你了解哪些关于 2D/3D 动画的知识？我非常期待听到你的想法！⬇️⬇️

如需采取进一步措施，你可以考虑屏蔽此人和/或举报滥用行为。