Intro🚀
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)
It was really fun to create at first, and I got so many reactions to my post. Thank you very much for checking!😸 However, I soon got bored because the roller coaster track was always the same. So this time, I created a CRAZY roller coaster builder to get more fun and excitement. I had to emphasize that I did not create a normal roller coaster builder, but a CRAZY roller coaster builder! Welcome to the CRAZY world!🙀
How Crazy is CRAZY Roller Coaster Builder🙀
- 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.🙀
How to use CRAZY Roller Coaster Builder📋
You can use the UI on the left side of the screen to make a CRAZY roller coaster.
1️⃣ Choose the track vertical direction. Straight? Left? Right?
2️⃣ Choose the track horizontal direction. Straight? Left? Right?
3️⃣ Choose the track mode. Normal? Loop?
4️⃣ Input the Size, UpDown, and Angle. You can input an extreme value if you want to make a CRAZY track. If you like a normal roller coaster, the default values will be fine.
5️⃣ Push the "Add Track" button, and a new track will be created.
6️⃣ The UI hides most of the screen, so push "Hide UI" to see the roller coaster clearly.
How I Created CRAZY Roller Coaster Builder🛠️
Last time, I created a roller coaster using RollerCoaster.js from the famous 3D library Three.js with the help of AI. I used React Three Fiber which is a wrapper of Three.js for React. I made a roller coaster CodePen sample and added beginner-friendly comments. This time, I useed my CodePen project as a base and added track builder function and UI to create a CRAZY track builder. I wanted to make the code simple and short for a demo. So after creating it, I refactored the code a little, made a common constants and component, and reduced the redundancy and made it reusable. I used Sky and Cloud from React Three Drei to easily make a realistic sky and clouds. Drei provides useful helpers for React Three Fiber. Also, I used Tailwind CSS to simplify CSS coding. However, creating the builder didn't go smoothly, and I wrote about the problems in Known Issues section.
Known Issues of CRAZY Roller Coaster Builder🤔
1️⃣ Without adding a curve track before an up/down track, the up/down track somehow twists. I tried to pass a default curve value, but it did not work. It seems necessary to fix the RollerCoaster.js library itself. I wanted to keep the demo simple, so I chose to copy the track creating function RollerCoasterGeometry from RollerCoaster.js and remove the twist.
2️⃣ The loop starts and ends at same position. I tried to add a small twist when looping to avoid crashing into the track, but this made a gap in the track and made it difficult to build. I wanted to keep the demo simple and chose not to add a twist to the loop.
I will update the code when I find a simple way to fix these issues.
Roller Coaster Underwater Version🌊
Last time, I created normal roller coaster, rainbow version 1, rainbow version 2, and a nightmare version. This time, I created an underwater version and added underwater-like CSS gradient background and bubbles rising up. ↓
Also, I made an underwater version 2 and added many features to the bubbles.
- Changed from flat bubbles to 3D bubbles.🫧
- Added left-and-right sway to bubbles to make the animation more realistic.🫧
- Made the bubbles small at the bottom and big at the top to make the animation more realistic.🫧
- Added blur to the screen to make a more underwater feeling. This makes the bubbles in the front clear and the bubbles in the back darker.🫧 Which underwater version do you like better?
CRAZY Roller Coaster Builder Underwater Version🫧
Future update ideas💡
- Add more background patterns
- Add more objects to the background
- Add camera control as you like
- Add speed control as you like
- Merge the roller coaster, the track builder, several backgrounds, and their animations into one project.
- Release an App using RollerCoaster.js
In case I fortunately get many reactions, I am thinking of updating it and releasing it as an app. I released a brain training app on Microsoft Store and Google Chreme Extension before, so I am thinking of try again with CRAZY Roller Coaster Builder or something similar. Moreover, if my app gets a good reaction, I can move to releasing it on Google Play and App Store.
My brain training App ↓
Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc
Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M
Vue.js
Last time, I also made a Svelte version of the roller coaster for study and curiosity. This time I tried Vue.js version. I used TresJS for handling 3D. It is a wrapper of Three.js for easy use with Vue.js. I have used both React and Vue.js before, but I think Vue.js is easier than React. React Hooks are crazy difficult for me to understand and use, but Vue.js is much simpler and easier to understand intuitively.
I wanted to make a CodePen sample of roller coaster to compare the difference between Vue.js and React. However, I couldn't use TresJS in CodePen, so I tried StackBlitz next. TresJS worked there, but it takes time for StackBlitz to start.
Angular
Also, this time I tried an Angular version. I wanted to use Angular Three to handle 3D. It is a wrapper of Three.js for easier use with Angular. Also, I wanted to make a CodePen sample of roller coaster to compare the difference between Angular and React. However, I couldn't use neither Angular Three nor CodePen, so I tried Angular + Three.js on StackBlitz.
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 are most popular for these sizes.
More about animation and AI
I wrote about 2D/3D animation before, so please also refer to it for more information about 2D/3D animation. ↓
- ((Learn with 🖼️Meme images) How to create 🎨3D animation using 🧠AI (React Three Fiber vs Three.js vs A-Frame + GSAP)
- (🧐I created a website animation that you might stare at for a while (GSAP)🎨) Also, here are my posts about AI. ↓
- (🧠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 free (Serena MCP)🧐
Outro🔚
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.
Happy AI coding!🧠 You're absolutely right!🤖
- 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!⬇️⬇️
Top comments (1)
Wohoo!! This looks like a big level up from your last blog, you added loops and underground animations too, can't wait for future updates and also how I'll be able to use these in my own projects some time ╰(°▽°)╯