DEV Community

Cover image for How to Create Never-Ending Fun (🎢RollerCoaster.js + React Three Fiber + AI)
Web Developer Hyper
Web Developer Hyper

Posted on

How to Create Never-Ending Fun (🎢RollerCoaster.js + React Three Fiber + AI)

#ai #webdev #css #svelte

Intro

When do you feel excited and fun? Nowadays, I am totally into trying the latest and trending IT technology. But when I was a child, I thought riding a roller coaster was quite fun and exciting.🎢 However, a roller coaster ends instantly, like a momentary dream. So, I created code that let us enjoy the roller coaster excitement forever at home!🚀

RollerCoaster.js🎢

I found a perfect library for this plan. It is the RollerCoaster.js. What a niche library it is. There is an example of this library on the official Three.js website (most popular 3D library).
Roller Coaster Demo ↓
https://threejs.org/examples/webxr_vr_rollercoaster.html
GitHub repository of Roller Coaster Demo ↓
https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_rollercoaster.html
Also, this is the GitHub repository of RollerCoaster.js. ↓
https://github.com/mrdoob/three.js/blob/master/examples/jsm/misc/RollerCoaster.js
The main funcion of this library is RollerCoasterGeometry, and you can use it to easily create realistic roller coaster tracks. ↓
https://threejs.org/docs/#RollerCoasterGeometry

Roller Coaster


I created a roller coaster CodePen sample with beginner-friendly comments with the help of AI. I trimmed the code from the official Three.js sample to make it easier for beginners to understand. I used React Three Fiber to handle 3D animation. It is a wrapper of Three.js, making it easier to use with React.

One of the fun points of this animation is that the roller coaster speeds up when going down and slows down when going up. You can adjust the speed in this part of the code. ↓

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

You can also adjust the course. The course shape is controlled by parametric equations using sine and cosine:

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;
Enter fullscreen mode Exit fullscreen mode

The number after t * controls the Frequency (how many waves/loops):

  • Higher frequency = More waves/loops → More complicated track
  • Lower frequency = Fewer waves/loops → Smoother simpler track Example for Y (vertical movement): 
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
Enter fullscreen mode Exit fullscreen mode

Think of It like this:
Imagine you start with a simple circular course (like a race track). Then:

  1. X equation adds horizontal twists (left-right weaving)
  2. Y equation adds vertical hills (up-down movement)
  3. Z equation adds depth curves (forward-back spiraling) So, higher frequencies make more complex patterns.

Roller Coaster Rainbow🌈


OK. Let's make the roller coaster more fun and exciting!😆 I changed the track color to a rainbow, and made the background to space with colorful stars. I added a CSS linear-gradient to create a base space atmosphere, and radial-gradient to create a fog atmosphere. ↓

/* 🌌 DEEP SPACE BASE - Simple black to dark purple gradient */
background: linear-gradient(to bottom, #000000 0%, #0d0019 100%);
Enter fullscreen mode Exit fullscreen mode 
/* 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%
);
Enter fullscreen mode Exit fullscreen mode

You can adjust the number of stars by changing the "i". ↓

for (let i = 0; i < 500; i++) {
Enter fullscreen mode Exit fullscreen mode

You can also adjust the size of the stars by changing the "size". ↓

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

Doesn't it look like a dream roller coaster? Making the stars more numerous and larger creates a quite different atmosphere for the course. ↓

Svelte

Also, I made a Svelte version for study. I used Threlte for handling 3D. It is a wrapper of Three.js for easy use with Svelte. Svelte has many advantages over React such as, simple and less code, smaller bundle size, and better performance.

<!-- Svelte -->
// Declare state
let velocity = 0.00004;
// Update state
velocity += 0.001;  // Just assign!
Enter fullscreen mode Exit fullscreen mode 
// React
// Declare state
const [velocity, setVelocity] = useState(0.00004);
// Update state
setVelocity(v => v + 0.001);  // Need setter function
Enter fullscreen mode Exit fullscreen mode

I wanted to make a CodePen sample of both default and rainbow roller coaster to compare the difference between Svelte and React. However, I couldn't use Threlte in CodePen, so next I tried StackBlitz. Threlte worked there, but it takes time for StackBlitz to start... Anyway, I will paste the code.
Roller Coaster Default ↓

Roller Coaster Rainbow ↓

Future update ideas

Using these code as a base, I have some future update ideas.😆

  • Add more animation to roller coaster and stars.
  • Add more physics to roller coaster and stars.
  • Making an UI that lets you create your own track visually without touching the code.

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. ↓

Also, here are my posts about AI ↓

Outro

Riding a roller coaster is fun and exciting. I cannot ride a real roller coaster endlessly, but now I can ride a virtual roller coaster endlessly. Making animation is super fun, and I would love to learn more!😊

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 for 2D/3D animation?
Do you know anything about 2D/3D animation?
I would love to hear your thoughts!⬇️⬇️

Top comments (1)

Collapse
 
itsugo profile image
Aryan Choudhary •

Woah! Another crazy post about animations! Love how you keep bringing new ideas, that we wouldn't be even aware of, if not for you. Great work, looking forward to seeing more.

Oh and also I started implementing the R3F + GSAP animation you helped me with, I'm only starting with the GSAP part right now, but I'll surely let you know once I've completed it, I'm using the code snippet as a guide to make it. Thanks again for that!