[Three.JS] Transform (Scale, Position, Rotate) 과 Quarternion, lookat

//Scale

mesh.scale.x =2

mesh.scale.y=0.5

mesh.scale.z=0.5

오브젝트의 크기를 조절하는것  scale

이렇게하거나

mesh.scale.set(2,0.5,0.5)

 

 

 

이렇게 한번에 set으로 한줄로 설정해도됨

 

 

x는 좌우로움직이고   y는 위아래로  z는 앞뒤로움직임.

뭔가 ㅇㄹㄷㅅ 때 움직이는 그 좌표값이네..?

블렌더는 z가 위아래, y가 앞뒤인것이 다르다

하지만 이것은 직접 설정해서 바꿀수있다고함   뭐야 더어렵자나요.. 그냥 외울래요..

mesh.position.x=0.7

mesh.position.y=-0.6

mesh.position.z=1

포지션역시 이렇게하거나

mesh.position.set(0.7, -0.6, 1)

이렇게 둘다가능한~~

 

 

 

 

로테이션은 

PI를 응용할수있다

파이 = 3.141592... 이런수

PI값이 180도? 반 회전이라고 보면됨  

반의 반 회전 (4분의1) 하고싶다면  pi/2

한바퀴 완전히 돌리고싶다   -? PI*2

 

이렇게 되어있는애를 rotation  과 PI 사용해서 돌려보자

//Rotation

mesh.rotation.x =Math.PI*0.25

mesh.rotation.y = Math.PI*0.25

 

0.25는 4분의 1임 그러니 PI의 4분의1-> 반의 반 회전임 (90도)

결과는

 

 

결과값  90도씩 돌아간것

 

여기서 문제는 이 로테이션의 축이 계속 오브젝트의 방향에 따라 변화한다는것

마치 블렌더의 object transform 과 같은 그런것일까

x로테이션을 해버리면

이후 y로테이션이  변한 로테이션값에 영향을 받아 같이 변한다고함

 

그렇다면어떻게해야 예상한 값이나올까?

로테이션순서를 신경써서 바꿔줘야한다고함

여기서부터 뭔가 알듯말듯 잘모르겠지만  fps게임을 생각해보자

y를 먼저 바꿔서 머리가 좌우로 돌아가는걸 세팅하고

x를 세팅해서 위아래로 고개가 돌아가는걸 세팅

 

이것을 어떻게하냐면 Reorder 를 사용해야함

 

//Rotation

mesh.rotation.reorder('YXZ')

mesh.rotation.x = Math.PI*0.25

mesh.rotation.y = Math.PI*0.25

 

reorder가 적용된모습

 

 

아무튼 이렇게 리오더ㅗ를한다고해도

넘헷갈림

그래서 사용하는것이 Quaternion임 

 

Euler(xyz방식)이 이해하긴쉽지만 three.js상에서는 이렇게 헷갈릴일이 많음  

그래서 quaternion을 씀!  쿼테이션은 결과값을 예측하기가 어렵지만 문제가 적다는 장점이있음

 

쿼테이션과 로테이션은 서로 상호작용을해서

쿼테이션값이 바뀌면 로테이션값도 그에 맞춰 변함   로테이션값이 변하면 쿼테이션값도 변함

그러니 쿼테이션의 방식을 완벽히 이해를 할 필요는없다고함? 

 

 

 

lookat

카메라가 오브젝트의 센터를 바라보게 할수 있는 명령어

로테이션을 힘들게 계산하고 고민할필요없이 걍 카메라가 오브젝트를 딱 보게 하는것임

 * Camera

 */

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)

camera.position.z=3

 

scene.add(camera)

camera.lookAt(mesh.position)

 

 

 

기존에 만들어져있던 카메라 (z방향 으로 3 만큼 떨어져있던) 에다가 

 

camera.lookat() 명령어를 추가함

괄호안에 mesh.position은 저 빨간 길쭉 네모의 위치를 말한것임

아주 완벽하게 물체의 중앙을 딱 보고있음

 

앞으로 매우 유용하게 쓰일것이라고함