🙀미친 롤러코스터 빌더 만들기 (🎢RollerCoaster.js + React Three Fiber + AI)

Source: Dev.to

소개 🚀

지난 번에 나는 끝이 없는 재미있는 롤러코스터를 만들고 DEV Community에 글을 올렸습니다.

끝이 없는 재미 만들기 (🎢 RollerCoaster.js + React Three Fiber + AI)

• 엄청난 가파른 상승과 하강을 절벽처럼 만들 수 있습니다. 🙀
• 현실적인 롤러코스터가 충돌하거나 트랙을 벗어나지 않고는 회전할 수 없는 미친듯이 날카로운 커브를 만들 수 있습니다. 🙀
• 내려갈 때 땅속으로 파고들어 지하에서 타는 즐거움을 경험할 수 있습니다. 🙀
• 물리 법칙을 무시하고 원하는 만큼 미친 루프를 만들 수 있습니다. 🙀

트랙 빌더의 입력값에 제한을 두지 않았기 때문에 극단적인 값도 입력할 수 있습니다. 🙀
화면 왼쪽에 있는 UI를 사용하여 미친 롤러코스터를 만들어 보세요.

How I Created the CRAZY Roller Coaster Builder 🛠️

지난번에는 유명한 3D 라이브러리 Three.js의 RollerCoaster.js와 AI의 도움을 받아 롤러코스터를 만들었습니다. React Three Fiber(Three.js용 React 래퍼)를 사용했고, 초보자도 이해하기 쉬운 주석을 달아 CodePen 샘플을 올렸습니다.

이번 버전에서는:

1. 이전 CodePen 프로젝트를 기반으로 사용했습니다.
2. 트랙‑빌더 함수와 UI를 추가해 미친 트랙을 만들 수 있게 했습니다.
3. 코드를 리팩터링했습니다: 공통 상수와 컴포넌트를 만들고, 중복을 줄이며, 모든 것을 재사용 가능하게 했습니다.
4. React‑Three‑Drei의 Sky와 Cloud를 활용해 현실감 있는 하늘과 구름을 구현했습니다.
5. Tailwind CSS를 사용해 스타일링을 간소화했습니다.

Known Issues

더 간단한 해결책을 찾으면 코드를 업데이트하겠습니다.

New Versions

• Underwater version – 수중 느낌의 CSS 그라디언트 배경과 상승하는 거품을 추가했습니다.
• Underwater version 2 – 거품을 대폭 개선했습니다:
  • 평면 거품을 3D 거품 🫧 으로 교체
  • 좌우 흔들림을 추가해 현실감 있는 애니메이션 구현 🫧
  • 거품 크기 조절 (아래는 작게, 위는 크게) 🫧
  • 블러 효과를 적용해 깊은 수중 느낌 연출 (전경 거품은 선명하게, 배경 거품은 어두워짐) 🫧

어떤 수중 버전이 더 마음에 드시나요?

향후 업데이트 아이디어 💡

• 배경 패턴을 더 추가합니다.
• 배경에 더 많은 객체를 추가합니다.
• 사용자 정의 가능한 카메라 제어를 추가합니다.
• 속도 제어를 추가합니다.
• 롤러코스터, 트랙 빌더, 다양한 배경 및 그 애니메이션을 하나의 프로젝트로 통합합니다.
• RollerCoaster.js를 사용한 앱을 출시합니다.

프로젝트에 많은 관심이 모이면 전체 기능을 갖춘 앱으로 전환할 수 있습니다. 저는 이전에 Microsoft Store에 뇌 훈련 앱과 Chrome 확장 프로그램을 출시한 경험이 있어 다시 할 수 있다고 자신합니다.

무료 Chrome 확장 프로그램으로 제공

• Muscle Brain Ultimate Editor

Microsoft Store에서 제공 (무료)

• Microsoft Store Link

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

네 프레임워크 모두 모든 규모의 프로젝트를 만들 수 있지만, 표시된 규모에서 가장 많이 사용되는 경향이 있습니다.

Related Posts

• Learn with 🖼️ Meme Images: 🧠 AI를 사용하여 🎨 3D 애니메이션을 만드는 방법 (React Three Fiber vs Three.js vs A‑Frame + GSAP)
• GSAP Animation: 잠시 바라볼 수 있는 웹사이트 애니메이션을 만들었습니다 (GSAP) 🎨

AI‑Related Posts

• 🧠 Codex가 옛날 Claude Code처럼 기분을 끌어올리게 하는 방법 (“당신이 완전히 맞아요!” 라는 반응을 얻기) 🤖
• 🤖🤖 AI를 쉽게 그리고 무료로 병렬 실행하는 방법 (Git Worktree Runner) 🧠🧠
• 🤖 AI가 지시를 더 잘 따르게 하는 무료 방법 (OpenSpec) 📝
• 🧠 AI를 보다 효율적으로 사용하는 방법 … (게시물 계속)

Conclusion

CRAZY Roller Coaster는 여러분에게 미친 듯이 짜릿한 경험을 선사합니다. 화면 속에서만 느낄 수 있는 광기와 미친 듯한 재미를 즐기고, 현실에서는 미치거나 화내지 맙시다. 🙀

이 글을 통해 무언가를 배웠길 바랍니다. 읽어 주셔서 감사합니다.

Questions & Ideas

• CRAZY Roller Coaster를 더 좋게 만들 수 있는 좋은 아이디어가 있나요?
• 2D/3D 애니메이션에 대한 좋은 아이디어가 있나요?
• 2D/3D 애니메이션에 대해 알고 계신가요?

여러분의 생각을 듣고 싶습니다! ⬇️⬇️