개발 · 컴퓨터공학 / / 2022. 9. 1. 18:28

three.js transform

728x90
반응형
mesh.position.set(0, 2, 0);

position 객체에는 set이라는 함수가 있어 좌표를 초기화 시킬 수 있다.

 

mesh.position.length();
mesh.position.distanceTo(new THREE.Vector3(1,2,0));
mesh.position.distanceTo(camera.position);

position 객체에는 다양한 함수들이 있는데, length의 경우 원점으로부터의 거리, distanceTo는 매개변수에 해당하는 position까지의 거리차이 등 유니티와 같은 3D 엔진의 Transform 객체의 함수들과 비슷한 구성으로 되어있다. 

 

mesh.scale.x = 2;
mesh.scale.y = 0.5;
mesh.scale.set(0, 1, 2);

scale객체도 다양한 함수들이 있다.

 

mesh.rotation.reorder('YXZ');
mesh.rotation.y = THREE.MathUtils.degToRad(45);
mesh.rotation.x = THREE.MathUtils.degToRad(20);

rotation객체를 통해 회전 방향을 변경할 수 있는데, 이때 각 축에 대해서 회전행렬을 곱하는 순서를.. 재설정하는 건가...?

 

잘 모르겠어서 좀 찾아봤따.

https://stackoverflow.com/questions/17517937/three-js-camera-tilt-up-or-down-and-keep-horizon-level

 

Three.js camera tilt up or down and keep horizon level

camera.rotate.y pans left or right in a predictable manner. camera.rotate.x looks up or down predictably when camera.rotate.y is at 180 degrees. but when I change the value of camera.rotate.y to ...

stackoverflow.com

object.rotation.order는 기본적으로 XYZ의 순서로 이루어져 있는데, 이는 rotation을 설정하였을 때 three.js에서 회전시키는 순서이다. 이는 object의 내부적인 좌표 시스템으로 월드 좌표계에서 적용되는 것이 아니다.

즉 코드에서 YXZ순으로 reorder설정되었다면, y축으로 먼저 rotation을 적용시킨 후 x축의 순서로 적용시키기 때문에 코드 작성자가 원하는 결과를 도출할 수 있다.

728x90
반응형

'개발 · 컴퓨터공학' 카테고리의 다른 글

three.js OrbitControls  (0) 2022.09.03
three.js mesh를 하나의 그룹으로 만들기  (2) 2022.09.02
three.js GUI 그리기  (0) 2022.08.31
three.js 프레임 확인하기  (0) 2022.08.30
three.js 축과 격자  (0) 2022.08.29
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유