🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 12月31日

如何創造永無止境的樂趣（🎢RollerCoaster.js + React Three Fiber + AI）

更新（2025/12/30）：新增雲霄飛車惡夢😨

引言

什麼時候會感到興奮和快樂？如今，我熱衷於嘗試最新最受歡迎的IT技術。但小時候，我覺得坐雲霄飛車既刺激又好玩。 🎢 然而，過山車就像一場轉瞬即逝的夢，轉眼就結束了。所以，我寫了一段程式碼，讓我們可以在家裡永遠享受過山車的刺激！ 🚀

RollerCoaster.js🎢

我找到了一個非常適合這個方案的函式庫，它就是RollerCoaster.js 。這真是一個小眾的庫。在Three.js （最受歡迎的 3D 庫）的官方網站上有一個這個庫的範例。

過山車演示 ↓

https://threejs.org/examples/webxr\_vr\_rollercoaster.html

過山車演示的 GitHub 程式碼庫 ↓

https://github.com/mrdoob/three.js/blob/master/examples/webxr\_vr\_rollercoaster.html

此外，這是 RollerCoaster.js 的 GitHub 程式碼倉庫。 ↓

https://github.com/mrdoob/three.js/blob/master/examples/jsm/misc/RollerCoaster.js

該庫的主要功能是RollerCoasterGeometry ），您可以使用它輕鬆建立逼真的過山車軌道。 ↓

https://threejs.org/docs/#RollerCoasterGeometry

雲霄飛車

{% codepen https://codepen.io/webdeveloperhyper/pen/WbxbdYZ %}

我借助人工智慧建立了一個帶有易於初學者理解的註釋的過山車CodePen範例。我精簡了Three.js官方範例中的程式碼，使其更便於初學者理解。我使用React Three Fiber來處理 3D 動畫。它是Three.js的一個封裝，因此更容易與React一起使用。

這個動畫的樂趣之一在於過山車在下坡時加速，上坡時減速。你可以在程式碼的這一部分調整速度。 ↓

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

您也可以調整航向。航向形狀由使用正弦和餘弦的參數方程式控制：

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;

t *後面的數字控制頻率（波的數量/循環次數）：

頻率越高 = 更多波形/循環 → 更複雜的軌道
頻率越低 = 波形/循環越少 → 音軌越平滑簡潔。

Y軸（垂直移動）範例：

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

你可以這樣理解：

想像一下，你從一個簡單的圓形賽道開始（就像賽車場一樣）。然後：

X 方程式增加了水平扭轉（左右交織）
Y 方程式增加了垂直方向的起伏（上下移動）
Z 方程式加入了深度曲線（前後螺旋）

因此，頻率越高，圖案就越複雜。

彩虹雲霄飛車🌈

{% codepen https://codepen.io/webdeveloperhyper/pen/JoKoYVB %}

好啦！讓我們把雲霄飛車變得更有趣更刺激吧！ 😆 我把軌道顏色改成了彩虹色，背景換成了滿天繁星的太空。我加入了 CSS linear-gradient來營造基礎的太空氛圍，也radial-gradient來營造霧氣氛圍。 ↓

/* 🌌 DEEP SPACE BASE - Simple black to dark purple gradient */
background: linear-gradient(to bottom, #000000 0%, #0d0019 100%);

/* 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%
);

您可以透過更改“i”來調整星級數量。 ↓

for (let i = 0; i < 500; i++) {

您也可以透過更改“大小”來調整星星的大小。 ↓

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

看起來是不是像夢幻的雲霄飛車？增加星星的數量和大小，將為賽道營造出截然不同的氛圍。 ↓

{% codepen https://codepen.io/webdeveloperhyper/pen/dPXoMvG %}

過山車惡夢😨

{% codepen https://codepen.io/webdeveloperhyper/pen/WbxvzjW %}

我製作了一個惡夢版的雲霄飛車。我提高了所有t *部分的數值，增加了更多的起伏和更急的彎道，打造出一條瘋狂刺激的路線。此外，我還提高了速度，讓它更加驚險刺激。我還將軌道顏色改為紅色到黑色的漸變，並修改了 CSS 漸變，使中心明亮、邊緣昏暗，營造出一種詭異的效果。

苗條

此外，我還用Svelte做了一個版本來學習。我使用Threlte來處理 3D 效果。 Threlte 是Three.js的一個封裝Svelte方便與Svelte一起使用。 Svelte 相比React有很多優勢，例如程式碼更簡潔、體積更小、效能更佳。

<!-- Svelte -->
// Declare state
let velocity = 0.00004;
// Update state
velocity += 0.001;  // Just assign!

// React
// Declare state
const [velocity, setVelocity] = useState(0.00004);
// Update state
setVelocity(v => v + 0.001);  // Need setter function

我原本想在CodePen分別建立一個預設過山車和彩虹過山車的範例，以便比較Svelte和React差異。但是，我無法在CodePen中使用Threlte ，所以接下來我嘗試了StackBlitz在Threlte上可以正常運作，但是StackBlitz啟動需要一些時間…總之，我會把程式碼貼在這裡。

過山車預設 ↓

{% stackblitz https://stackblitz.com/edit/sveltejs-kit-template-default-pth562ik?ctl=1&embed=1&file=src%2Froutes%2FScene.svelte&view=preview %}

彩虹雲霄飛車 ↓

{% stackblitz https://stackblitz.com/edit/sveltejs-kit-template-default-xtpbf9tc?ctl=1&embed=1&file=src%2Froutes%2FScene.svelte&view=preview %}