(🖼️밈 이미지와 함께 배우기) 🧠AI를 사용해 🎨3D 애니메이션 만드는 방법 (React Three Fiber vs Three.js vs A-Frame + GSAP)

Source: Dev.to

소개

요즘 저는 두뇌 훈련 앱 Muscle Brain을 만들고 있습니다.

• 제 앱 DEV 포스트: 🚀 How I released Chrome Extensions (💪🧠 Muscle Brain v4)

지난 번에는 앱을 위한 웹사이트를 만들고 GSAP으로 2D 애니메이션을 제작했습니다.

• 제 웹사이트 DEV 포스트: 🧐 I created a website animation that you might stare at for a while (GSAP) 🎨

이제 3D를 배우고 2D 애니메이션을 3D로 변환하고 싶습니다. 3D를 배우는 것이 새로운 개념이 많아 예상보다 더 어려웠습니다. 재미와 이해를 돕기 위해 밈 이미지를 활용해 단계별로 3D를 함께 배워봅시다! 🚀

3D 웹과 2D 웹의 차이점

3D는 보다 몰입감 있고 사실적인 애니메이션 경험을 제공하지만, 2D보다 학습 곡선이 가파릅니다. 주요 차이점은 다음과 같습니다.

• 축: 2D는 X(가로)와 Y(세로)만 사용합니다. 3D는 Z(깊이)를 추가해 객체가 앞뒤로 배치될 수 있습니다.
• 카메라: 2D는 카메라가 필요 없으며 모든 것이 바로 보입니다. 3D는 위치, 회전, 시야각(FOV)을 가진 카메라가 필요하고, 카메라 뒤에 있는 객체는 보이지 않습니다.
• 조명: 3D에서는 조명이 필수이며, 조명이 없으면 재질이 검게 보입니다.
• 재질: 3D는 metalness (0 = 플라스틱, 1 = 금속)와 roughness (0 = 거울처럼, 1 = 무광) 같은 속성을 가진 재질을 사용합니다. CSS는 캔버스 주변 UI 레이아웃에 여전히 유용합니다.

중요한 3D 용어

아래는 Three.js(또는 그 래퍼)를 사용할 때 마주하게 될 핵심 용어들입니다.

Three.js vs React Three Fiber vs A‑Frame

세 라이브러리 모두 WebGL을 래핑해 3D 개발을 쉽게 해 주지만, 목표하는 워크플로우가 다릅니다.

Three.js

• WebGL을 직접 감싸는 라이브러리.
• 씬, 조명, 재질 등을 처리해 저수준 코드를 크게 줄여 줍니다.
• 공식 문서:
  • Creating a scene
  • Fundamentals

React Three Fiber (r3f)

• Three.js용 React 렌더러.
• 3D 코드를 React 컴포넌트 형태로 작성하게 해 재사용성과 선언형 스타일을 촉진합니다.
• 문서:
  • Introduction
  • Your first scene

A‑Frame

• Three.js 위에 구축된 선언형 HTML 기반 프레임워크로, VR/AR에 초점.
• React를 사용하지 않는 개발자도 빠르게 3D/VR 프로토타입을 만들 수 있습니다.
• 문서:
  • Introduction
  • Building a basic scene

비교 표

세 라이브러리 모두 Node.js 환경에서 사용할 수 있습니다. React Three Fiber는 React가 필요하고, Three.js와 A‑Frame은 순수 JavaScript/TypeScript와 어떤 프레임워크와도 함께 사용할 수 있습니다.

샘플 은하 애니메이션 (CodePen)

무작위 별들이 카메라에서 멀리 떨어진 위치에서 가까운 위치로 이동하는 아주 간단한 은하 애니메이션을 만들었습니다. 별들은 자체적으로 빛나기 때문에 조명이 필요 없습니다. 사용된 재질은 다음과 같습니다.

• React Three Fiber – meshBasicMaterial
• Three.js – MeshBasicMaterial
• A‑Frame – shader: flat

React Three Fiber 코드 예시 (GSAP 애니메이션)

아래 스니펫은 각 별을 멀리(z: -50)에서 가까운(z: 5) 위치로 3초 동안 애니메이션하고, 무한히 반복합니다.

// Animate the star using GSAP
// gsap.fromTo = animate FROM one value TO another value
gsap.fromTo(
  ref.current.position,          // What to animate (the star's position in 3D space)
  { z: -50 },                    // Starting value: far away (50 units behind camera)
  {
    z: 5,                        // Ending value: close to camera (5 units in front)
    duration: 3,                 // Animation takes 3 seconds
    delay: 0,                    // No initial delay
    repeat: -1,                  // Loop forever
    ease: "none"
  }
);