Transformation 의 3요소

• Position (위치)
• Scale (크기)
• Rotation (회전)

<Canvas>
  <mesh
    position={[0, 0, 0]}
    scale={[1, 1, 1]}
    rotation={[0, THREE.MathUtils.degToRad(45), 0]}>
    ...
  </mesh>
</Canvas>

three.js 엘리먼트의 속성으로 컨트롤 할 수 있다. {속성}: [x축, y축, z축]

rotation은 라디안 기준인 것을 주의해야한다.

Object3D

Object3D는 우리가 다루게 될 많은 것들(Scene, Camera,Object, Helper, Light)의 상위 클래스다. 강의에서는 변환의 3요소를 컨트롤 할 수 있는 속성이 여기에 들어있음을 강조하고 있다. 즉, Object3D를 상속받았다면 변환 가능하다는 의미다.

Group으로 묶어 함께 변환 가능하다

<group position={[0, 2, 0]}>
  <mesh
    position={[0, 0, 0]}
    scale={[1, 1, 1]}
    rotation={[0, 0, 0]}>
    ...
  </mesh>
  <mesh
    position={[2, 0, 0]}
    scale={[1, 1, 1]}
    rotation={[0, 0, 0]}>
    ...
  </mesh>
</group>

group 엘리먼트로 오브젝트들을 묶을 수 있고 group의 속성으로 하위 오브젝트들을 묶어서 함께 변환시킬 수 있다.

오브젝트들은 각각의 좌표축을 가진다. (Local 좌표계)

axesHelper는 위치에 따라 가장 가까운 Object3D를 찾아간다

<group>
  <axesHelper /> // group 의 좌표계
  <mesh> // mesh-1
    <axesHelper /> // mesh-1의 좌표계
    ...
  </mesh>
  <mesh> // mesh-2
    <axesHelper /> // mesh-2의 좌표계
    ...
  </mesh>
</group>

Geometry와 모델링 개념

Geometry는 쉽게 말하면 삼각형의 조합으로 원하는 형태를 만들어낸 것이라고 할 수 있다. 형태를 만들어나가는 데 있어서 성능상 신경써야하는 핵심은 최소한의 삼각형으로 원하는 형태를 만드는 것이다.

R3F에서 mesh를 추가하는 3가지 방법

1. three.js element 이용

   // 1
   <mesh>
     <boxGeometry />
     <meshStandardMaterial color="red" />
   </mesh>
   // 2
   <mesh geometry={new THREE.BoxGeometry(1, 1, 1)}>
     <meshStandardMaterial color="red" />
   </mesh>
   

2. scene에 직접 추가

   const { scene } = useThree()
   
   const geometry = new THREE.BoxGeometry(1, 1, 1)
   const meterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
   const cube = new THREE.Mesh(geometry, meterial)
   
   scene.add(cube)