[ReactThreeFiber] Tranformation

도 를 라디안으로 바꾸려면 PI/180

Tranformation

3D 객체(mesh)에 대한 Transformation

1. position
2. rotation
3. scale

---

const refMesh = useRef()

//..

<axesHelper scale={10} />
<directionalLight position={{1,1,1}} scale={[2,1,1]} />
<OrbitControls />
<mesh ref={refMesh} position={[2,0,0] rotation={[0, 45*MathPI/180, 0]}>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="fcfcfc" />
  <axesHelper />
</mesh>

axesHelper - 좌표계

OrbitControls - 화면을 회전, 확대할 수있는 컨트롤러

<mesh position={[2,0,0]} /> , <mesh position-y={2} /> - mesh를 x축으로 2만큼 이동

<mesh rotation={[0, 45*MathPI/180, 0]} />, <mesh rotation-y={[45*MathPI/180]} /> - y를 45도 회전 <mesh rotation-y={THREE.MathUtils.degToRad{45}} /> 와도 같음

<mesh scale={[2,1,1]}> - x축으로 2배 커짐

mesh 안에서의 는 local 좌표계로 mesh에 대한 축을 그려준다.

mesh 안에서 도형을 만들고 또 를 넣으주면 그에 대한 local 좌표계가 만들어 지며 canvas의 좌표계를 world 좌표계라고 한다.