🙀How to Create a CRAZY Roller Coaster Builder (🎢RollerCoaster.js + React Three Fiber + AI)
Source: Dev.to
Introduction 🚀
Last time, I created a never‑ending fun roller coaster and wrote a post on the DEV Community.
How to Create Never‑Ending Fun (🎢 RollerCoaster.js + React Three Fiber + AI)
- You can make crazy ups and downs like a sheer cliff. 🙀
- You can make crazy sharp curves that are impossible for a real roller coaster to turn without crashing or jumping out of the track. 🙀
- You can penetrate the ground when going down and enjoy a ride underground. 🙀
- You can make crazy loops as much as you want that ignore physics. 🙀
I didn’t set limits on the input values of the track builder, so you can input extreme values. 🙀
Use the UI on the left side of the screen to make a crazy roller coaster.
How I Created the CRAZY Roller Coaster Builder 🛠️
Last time I built a roller coaster with RollerCoaster.js (from the famous 3D library Three.js) and the help of AI. I used React Three Fiber, a React wrapper for Three.js, and posted a CodePen sample with beginner‑friendly comments.
For this version I:
- Used the previous CodePen project as a base.
- Added a track‑builder function and UI to create a crazy track.
- Refactored the code: created common constants & components, reduced redundancy, and made everything reusable.
- Leveraged Sky and Cloud from React‑Three‑Drei for a realistic sky and clouds.
- Used Tailwind CSS to simplify styling.
Known Issues
| # | Issue | What I Tried | Current Work‑around |
|---|---|---|---|
| 1️⃣ | Without adding a curve track before an up/down track, the up/down track twists. | Passed a default curve value (didn’t work). | Copied RollerCoasterGeometry from RollerCoaster.js and removed the twist. |
| 2️⃣ | Loops start and end at the same position, causing a crash. | Added a small twist to the loop (created a gap). | Kept the demo simple and left the loop untwisted. |
I’ll update the code when I find a simpler fix.
New Versions
- Underwater version – added an underwater‑like CSS gradient background and rising bubbles.
- Underwater version 2 – many bubble enhancements:
- Switched from flat to 3D bubbles 🫧
- Added left‑right sway for realistic animation 🫧
- Scaled bubbles (small at the bottom, large at the top) 🫧
- Applied a blur effect to give a deeper underwater feeling (foreground bubbles stay clear, background bubbles become darker) 🫧
Which underwater version do you like better?
Future Update Ideas 💡
- Add more background patterns.
- Add more objects to the background.
- Add customizable camera controls.
- Add speed controls.
- Merge the roller coaster, track builder, multiple backgrounds, and their animations into one project.
- Release an app using RollerCoaster.js.
If the project receives a lot of interest, I may turn it into a full‑featured app. I’ve previously released a brain‑training app on the Microsoft Store and a Chrome Extension, so I’m confident I can do it again.
Available as Free Chrome Extensions
Available on Microsoft Store (Free)
Framework Experiments
Vue.js Version
I built a Vue.js version using TresJS (a Three.js wrapper for Vue). I find Vue.js more intuitive than React; React Hooks feel “crazy difficult” for me. I wanted a CodePen demo to compare Vue and React, but TresJS isn’t supported there, so I tried StackBlitz, where it works (though startup is a bit slow).
Angular Version
I also tried an Angular version with Angular‑Three (a Three.js wrapper for Angular). Like Vue, I wanted a CodePen demo, but neither Angular‑Three nor CodePen support it, so I used StackBlitz again.
React vs Vue vs Svelte vs Angular – Comparison Table
| Framework | Difficulty | Project Size | Community Size | 3D Library |
|---|---|---|---|---|
| Svelte | Easy | Small | Small | Threlte |
| Vue | Medium | Small‑Medium | Big | TresJS |
| React | Hard | Medium‑Big | Biggest | React Three Fiber |
| Angular | Hardest | Big | Medium | Angular Three |
All four can build any size of project, but they tend to be most popular for the sizes shown.
Related Posts
- Learn with 🖼️ Meme Images: How to create 🎨 3D animation using 🧠 AI (React Three Fiber vs Three.js vs A‑Frame + GSAP)
- GSAP Animation: I created a website animation that you might stare at for a while (GSAP) 🎨
AI‑Related Posts
- 🧠 How to make Codex boost your mood like good old Claude Code (Getting back “You’re absolutely right!”) 🤖
- 🤖🤖 How to run AI in parallel easily and for free (Git Worktree Runner) 🧠🧠
- 🤖 How to make AI follow your instructions more for free (OpenSpec) 📝
- 🧠 How to use AI more efficiently for … (post continues)
Conclusion
CRAZY Roller Coaster will give you a CRAZY experience. Feel the madness and craziness only on the screen, and let’s not get CRAZY and mad in real life. 🙀
I hope you learned something from this post. Thank you for reading.
Questions & Ideas
- Do you have any good ideas to make this CRAZY Roller Coaster better?
- Do you have any good ideas for 2D/3D animation?
- Do you know anything about 2D/3D animation?
I would love to hear your thoughts! ⬇️⬇️