DEV Community

Cover image for 🙀How to Create a CRAZY Roller Coaster Builder (🎢RollerCoaster.js + React Three Fiber + AI)

🙀How to Create a CRAZY Roller Coaster Builder (🎢RollerCoaster.js + React Three Fiber + AI)

Web Developer Hyper on January 12, 2026

Update (2026/01/13): Added CRAZY Roller Coaster Builder Rainbow Version🌈 Intro🚀 Last time, I created a never-ending fun roller coaster ...
Collapse
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen

woot! Nice

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you! Please enjoy your CRAZY ride on the CRAZY roller coaster. 🙀

Collapse
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen

I will! Thank you, for your like for my project retention engagement assistant. It is mind-blowing with the avatar eh? Don't worry, I will deploy a project tomorrow. I finished working on a small project today. I think that you will like it :). I

Thread Thread
 
webdeveloperhyper profile image
Web Developer Hyper

Agentic AI avatars sound cool! Looking forward to your update. 😃

Thread Thread
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen • Edited

This project is really cool but it doesn't use agentic ai like my previous project retention engagement. It does use agentic AI.

Thread Thread
 
webdeveloperhyper profile image
Web Developer Hyper

Yes, my sample only uses AI for coding and doesn’t have any AI features. So it would be more creative and enjoyable if I added AI functionality. Adding AI features has the potential to turn the sample into something quite different. Thank you for the idea.💡

Thread Thread
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen

Nice! You are welcome :)

Thread Thread
 
webdeveloperhyper profile image
Web Developer Hyper

I want to use an AI that won’t bankrupt me with API calls, maybe Gemini’s free plan or something like that. I’m afraid of bot attacks that could make thousands of API calls in a second.💸

Thread Thread
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen

I use gemini 2.5 flash for free.. You can use langChain, LangSmith, and LangGraph. ! pip something..... I use MCP server/free. They are all free application :). I used google colab on a free plan.

Thread Thread
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for showing me many free options. I’d like to try them as my AI skills improve. For now, I want to start with something simple and easy so I don’t fail right from the beginning. Maybe I’ll start by simply calling Gemini from my app and see what AI can do.🤖

Thread Thread
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen

No worries at all! You can use Copilot or GitHub Copilot to help generate the code for the MCP server. LangChain’s website also has free guides covering LangChain, LangSmith, and LangGraph, which make the process much easier. You’ve got this — I’m excited to see what you build next!

Thread Thread
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your suggestion. I would love to make use of AI tools in the future. It might open up a whole new world. 🌏

Thread Thread
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen

no problem :). Yes, it does!

Collapse
 
itsugo profile image
Aryan Choudhary

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 ╰(°▽°)╯

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking! I still have many ideas for future updates, so please stay tuned. 😄

Collapse
 
effnd profile image
Marat Sabitov

Nice job! You can put your Roller Coaster inside <roller-coaster> web component so it will be framework-agnostic. Then anyone can embed it

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your advice! Web Components look like a great idea for making the code framework-agnostic and easy for others to reuse. It would be even more fun if many people started updating the roller coaster in their own ways and using it.😀

Collapse
 
ashwin_mehta profile image
Ashwin Mehta

It's so nice and really fun

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking! I’m glad you enjoyed it. 😀

Collapse
 
piritiz profile image
PIRITIZ

Nice work!

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you!🎢