🙀如何创建一个疯狂的过山车构建器（🎢RollerCoaster.js + React Three Fiber + AI）
Source: Dev.to
请提供您想要翻译的具体文本内容，我将按照要求保留源链接、格式和技术术语，仅翻译正文部分。谢谢！
介绍 🚀
上次，我创建了一个永无止境的有趣过山车，并在 DEV Community 上写了一篇文章。
如何创建永无止境的乐趣 (🎢 RollerCoaster.js + React Three Fiber + AI)
- 你可以制作 疯狂的起伏，如同陡峭的悬崖。 🙀
- 你可以制作 疯狂的急转弯，真实的过山车根本无法在不撞车或跳出轨道的情况下完成。 🙀
- 在下降时，你可以 穿透地面，享受地下行驶的乐趣。 🙀
- 你可以随意制作 疯狂的环形，不受物理限制。 🙀
我没有对轨道构建器的输入值设限，所以你可以输入极端数值。 🙀
使用屏幕左侧的 UI 来制作 疯狂的过山车。
我是如何打造疯狂过山车构建器 🛠️
上一次，我使用 RollerCoaster.js（来自著名的 3D 库 Three.js）并借助 AI，构建了一条过山车。那时我用了 React Three Fiber——Three.js 的 React 包装器，并在 CodePen 上发布了带有初学者友好注释的示例。
在本次版本中，我：
- 以之前的 CodePen 项目为基础。
- 添加了 轨道构建函数 与 UI，以创建 疯狂轨道。
- 重构代码：创建公共常量与组件，减少冗余，使所有内容可复用。
- 利用 React‑Three‑Drei 中的 Sky 与 Cloud 实现逼真的天空和云彩。
- 使用 Tailwind CSS 简化样式。
已知问题
| # | 问题 | 我的尝试 | 当前变通方案 |
|---|---|---|---|
| 1️⃣ | 在上升/下降轨道前未添加曲线轨道时，上升/下降轨道会扭曲。 | 传入默认曲线值（未生效）。 | 从 RollerCoaster.js 复制 RollerCoasterGeometry 并去除扭曲。 |
| 2️⃣ | 环形轨道的起点和终点重合，导致崩溃。 | 为环形轨道添加了小幅扭曲（产生间隙）。 | 保持演示简洁，保持环形轨道不扭曲。 |
找到更简洁的解决办法后，我会更新代码。
新版本
- 水下版 – 添加了类似水下的 CSS 渐变背景和上升气泡。
- 水下版 2 – 大量气泡改进：
- 从平面气泡切换为 3D 气泡 🫧
- 添加左右摇摆，实现更真实的动画 🫧
- 气泡尺寸随深度变化（底部小，顶部大） 🫧
- 应用模糊效果，营造更深的水下感受（前景气泡保持清晰，背景气泡变暗） 🫧
你更喜欢哪个水下版本？
未来更新想法 💡
- 添加更多背景图案。
- 在背景中添加更多对象。
- 添加可自定义的相机控制。
- 添加速度控制。
- 将过山车、轨道构建器、多背景及其动画合并为一个项目。
- 使用 RollerCoaster.js 发布应用。
如果该项目受到广泛关注，我可能会将其转变为功能完整的应用。我之前在 Microsoft Store 发布过脑力训练应用，并发布过 Chrome 扩展，因此我有信心再次实现。
可作为免费 Chrome 扩展获取
在 Microsoft Store 上可用（免费）
Source: …
框架实验
Vue.js 版本
我使用 TresJS（Vue 的 Three.js 包装器）构建了一个 Vue.js 版本。我觉得 Vue.js 比 React 更直观；React Hooks 对我来说“非常难”。我想做一个 CodePen 演示来对比 Vue 和 React，但 TresJS 在那里不受支持，于是我尝试了 StackBlitz，在那里可以运行（虽然启动稍慢）。
Angular 版本
我还尝试了使用 Angular‑Three（Angular 的 Three.js 包装器）的 Angular 版本。和 Vue 一样，我想做一个 CodePen 演示，但 Angular‑Three 和 CodePen 都不支持，于是我再次使用 StackBlitz。
React vs Vue vs Svelte vs Angular – 对比表
| 框架 | 难度 | 项目规模 | 社区规模 | 3D 库 |
|---|---|---|---|---|
| Svelte | 简单 | 小 | 小 | Threlte |
| Vue | 中等 | 小‑中 | 大 | TresJS |
| React | 困难 | 中‑大 | 最大 | React Three Fiber |
| Angular | 最难 | 大 | 中等 | Angular Three |
四者都可以构建任何规模的项目，但它们通常在上述规模中最受欢迎。
相关帖子
- 学习 🖼️ Meme 图片: 如何使用 🧠 AI 创建 🎨 3D 动画 (React Three Fiber vs Three.js vs A‑Frame + GSAP)
- GSAP 动画: 我创建了一个网站动画，你可能会盯着看一会儿 (GSAP) 🎨
与 AI 相关的帖子
- 🧠 如何让 Codex 像老朋友 Claude Code 那样提升你的情绪（重新获得“你说得完全正确！”） 🤖
- 🤖🤖 如何轻松免费地并行运行 AI（Git Worktree Runner） 🧠🧠
- 🤖 如何让 AI 更好地遵循你的指令，且免费（OpenSpec） 📝
- 🧠 如何更高效地使用 AI … (帖子未完)
结论
CRAZY Roller Coaster 将为您带来疯狂的体验。只在屏幕上感受疯狂与狂热，别在现实生活中变得疯狂和生气。 🙀
我希望您从本文中学到了一些东西。感谢阅读。
问题与想法
- 您有什么好点子可以让这款 CRAZY Roller Coaster 更好吗？
- 您对 2D/3D 动画 有什么好点子吗？
- 您了解 2D/3D 动画 吗？
我很想听听您的想法！ ⬇️⬇️