Three.js 객체 변화주기(position, axesHelper(), scale, rotation )

이번엔 저번에 만든 3d 객체의 위치를 이동시켜 보면서 익숙해져 보겠다. 

 

set() 함수를 이용하면 일일이 x,y,z 값을 하나 하나 정해주지 않고 한 번에 정의해줄 수 있다. 

 

mesh 생성후

mesh.position.x = 0.7;
mesh.position.y = -0.6;
mesh.position.z = 1;   
// 하나 하나 정의



mesh.position.set(0.7,-0.6,1) // 한 방에 정의

 

또 position.length(),  position.distanceTo()등의 함수도 있는데 개체와 인자로 넣어준 객체 간의 거리를 나타낼 때 쓴다. 

console.log(mesh.position.distanceTo(camera.position))

 

그 다음 axis 즉 x,y,z 축들을 기반으로 위치를 잡을 때 도움이 되는 것이 있는데 

const axesHelper = new THREE.AxesHelper();
scene.add(axesHelper);

 

 

초록색이 y, 주황색이 x , 파란색이 z 축을 의미하고 이것을 기준으로 위치를 잡으면 용이 할 것이다. 

 

그 다음 scale이 있는데 css를 조금 해봤으면 크기를 조절해줄수 있다는 것을 알 것이다. 

객체의 크기를 조절 할 수 있는 함수인데 여기서도 set()을 써 줄 수 있다. 

 

 

mesh.scale.x = 4;  
mesh.scale.y = 1;  
mesh.scale.z = 0.5;   


mesh.scale.set(4,1,0.5) // 위의 코드와 같은 결과 간편한 코드

 

지금까지 객체의 위치변경, 사이즈 변경, 기준점을 잡아주는 도구 등을 알아봤고 이제 한번 회전시키는 것을 알아보자.

 

rotation속성을 이용하면 되는데 내용이 어렵진 않아도 살짝 헷갈리거나 복잡할 수 있다. 

 

회전은 각각 x,y,z 축을 이용해 할 수 있는데 위의 사진같이 각 축에 막대기를 꽂고 회전시킨다고 생각하면 되겠다. 비교하기 위해 사진을 비교해가면서 보겠다. 

 

 

mesh.rotation.x = 1;

 

mesh.rotation.x = 2;

 

 

 

이벤엔 y축 기준

mesh.rotation.y = 1;

 

mesh.rotation.y = 2;

 

 

 

위의 사진들 같이 각각의 축 상대로만 회전을 시켜봤는데 주의 할 점이 예를 들어 y축을 먼저 회전시키고 x축 회전을 시키려 하면 맨 처음 기존의 x축 과 y축에 의해 회전되고 난 뒤의 x축은 방향이 다르기 때문에 예상했던 대로 결과가 나오지 않을 수도 있다. 먼저 회전 시키고난 축에 의해 변경된 다음축을 기준으로 그 다음 회전을 결정지어 주면 되겠다. 

 

 

reorder()라는 함수는 이렇게 x,y,z 등 여러 축을 회전시킬 때 무슨축부터 회전시킬지 그 순서를 정해주는 함수다. 

 

mesh.rotation.x = 1;
mesh.rotation.y = 2;

 

 

mesh.rotation.reorder('YXZ');
mesh.rotation.x = 1;
mesh.rotation.y = 2;

 

 

두 차이점은 어디 축이 먼저 회전했느냐인데 reorder로 축 순서를 정해주었다. 주의점은 보다시피 난 z축에 대한 rotation을 쓰지 않았지만 함수 인자에 순서를 매겨 줄 때 빠지니까 작동하지 않았고 축들도 대문자로 써주어야 작동한다. 또 rotation을 하기 전에 미리 작성해주어야 한다.