7 min to read

노베이스가 말아주는 3D Transformation

그룹화된 객체의 제어와 로컬-월드 좌표계의 차이를 중심으로 3D 공간에서의 구조적 활용을 심화

Featured image

요약

이번 강의에서는 Group을 활용하여 다수의 Mesh를 제어하고, 애니메이션과 조명 효과를 추가하는 방법을 배웠습니다.
저번 강의에서는 단일 Mesh와 기본적인 애니메이션에 초점이 맞춰졌지만, 이번 강의는 그룹화된 객체의 제어와 로컬-월드 좌표계의 차이를 중심으로 3D 공간에서의 구조적 활용을 심화했습니다.

주요 개념 설명

1. Position, Scale, Rotation

Position

Scale

Rotation

2. Object3D의 계층 구조

Scene

Group

Mesh

Geometry

Material

Mesh = Geometry + Material

주요 코드 설명: ThreeElement.tsx

이번 강의에서는 Group을 중심으로 다수의 Mesh를 생성하고, 애니메이션을 추가하는 방법을 다뤘습니다.

1. 주요 코드 구성

1) Group 생성

// ThreeElement.tsx

return(
    <>
        <directionalLight position={[5,5,5]}/>
        <group
            ref={groupRef}
            position={[0,0,3]}
            rotation={[
                THREE.MathUtils.degToRad(0), 
                THREE.MathUtils.degToRad(0),
                THREE.MathUtils.degToRad(0)
            ]}
        >
            <axesHelper args={[3]}/>
            <mesh 
                ref={boxRef}
                position={[0,0,2]}
                scale={[1,1,1]}
                rotation={[
                    THREE.MathUtils.degToRad(0), 
                    THREE.MathUtils.degToRad(0),
                    THREE.MathUtils.degToRad(0)
                ]}
            >
                <axesHelper args={[3]}/>
                <boxGeometry />
                <meshStandardMaterial color="red"/> 
            </mesh>
            <mesh 
                ref={boxRef}
                position={[2,0,0]}
                scale={[1,1,1]}
                rotation={[
                    THREE.MathUtils.degToRad(0), 
                    THREE.MathUtils.degToRad(0),
                    THREE.MathUtils.degToRad(0)
                ]}
            >
                <axesHelper args={[3]}/>
                <boxGeometry />
                <meshStandardMaterial color="blue"/> 
            </mesh>
            <mesh 
                ref={boxRef}
                position={[0,2,0]}
                scale={[1,1,1]}
                rotation={[
                    THREE.MathUtils.degToRad(0), 
                    THREE.MathUtils.degToRad(0),
                    THREE.MathUtils.degToRad(0)
                ]}
            >
                <axesHelper args={[3]}/>
                <boxGeometry />
                <meshStandardMaterial color="green"/> 
            </mesh>
        </group>
)

Group

Mesh

애니메이션 추가

const { size, gl, scene, camera } = useThree();
const groupRef = useRef<THREE.Mesh>(null);

useFrame((state, delta) => {
    scene.rotation.x += 0.01; // Scene
    groupRef.current.rotation.x += delta; // Group 
})

scene.rotation.x = THREE.MathUtils.degToRad(45) // Scene

App.tsx 코드

이번 강의에서의 설정:

//App.tsx

function App() {

  return(
    <>
        <Canvas
          camera=
        >
          <color attach="background" args={["white"]}/>
          <OrbitControls/>
          <axesHelper args={[6]}/>  // ← 얘
          <gridHelper args={[10, 10]}/>
          <ThreeElement/>
        </Canvas>
    </>
  )
}

export default App

저번 강의와의 차이점

1) Object3D 계층 구조

2) 다수 객체 생성

3) 애니메이션

실행방법 정리

  1. Node.js설정: 
    $ nvm use 18
  2. 필요한 패키지 설치 
    $ npm install @react-three/fiber @react-three/drei
  3. 개발 서버 실행 
    $ npm run dev

느낀점

이번 강의는 3D 공간을 구조적으로 이해하고 활용하는 데 많은 도움이 되었다.
특히 Group을 활용해 객체를 묶고, 로컬 좌표계와 월드 좌표계의 차이를 명확히 이해할 수 있었다.

조명을 추가하면서 단순한 박스들이 더 현실감 있게 보였고, 애니메이션을 통해 장면이 생동감 있게 표현되는 점이 흥미로웠다.

React Three Fiber를 활용해 복잡한 3D 로직을 간결하게 구현할 수 있다는 점에서 작업이 더 직관적이고 재미있게 느껴졌다.
앞으로 이 개념들을 활용해 더 창의적인 3D 장면을 만들어보고 싶다.