[three js] 개체 위치 설정하기, 이동시키기

[0. 선요약]

1. 화면에 보이는 모습을 정리하면 아래와 같음

"정면"에서 보는 화면	"위"에서 보는 화면

2. 위치 변경은 다음과 같이 가능하다

(1) x, y, z를 각각 바꾸기

개체.position.setX(x위치);
개체.position.setY(y위치);
개체.position.setZ(z위치);

(2) x, y, z를 한 번에 바꾸기

개체. position.set(x위치, y위치, z위치);

 

[1. 개체(카메라, 3d모델)의 초기 위치]

아래와 같이 코드를 작성하면, 정육면체가 전혀 보이지 않는다.

코드	보이는 화면

- 그 이유는 카메라와 개체(큐브) 모두 중앙에 위치하고 있기 때문이다.

- alert를 사용해 개체(큐브)의와 카메라의 위치를 확인해보았다

alert로 박스 위치 확인하기	박스 위치

- 그렇다면 카메라와 객체를 움직여보자

 

[2. 위치 조정하기]

1. 카메라 위치 조정하기

javascript	화면
// 카메라를 z축에서 5 이동 camera.position.set(0, 0, 5);
// 카메라를 x축에서 5 이동 camera.position.set(5, 0, 5);
// 카메라를 y축에서 2.5 이동 camera.position.set(5, 2.5, 5);

이게 바로 z값부터 움직인 이유다!

- x와 y는 각각 좌우, 위아래로 움직여서 z값의 변동 없이는 개체를 보여줄 수가 없다.

- 카메라를 움직이는 경우 화면 자체가 움직이는 것이기 때문에 모든 축의 방향이 헷갈릴 수 있다.

- 그런 이유로, 3d 개체를 움직이는 것이 나에게는 조금 더 편하다.

 

2. 3d모델 위치 조정하기

javascript	화면
// 개체를 z축에서 -5 이동 cube.position.set(0, 0, -5)
// 개체를 x축에서 5 이동 cube.position.set(5, 0, -5)
// 개체를 y축에서 5 이동 cube.position.set(5, 5, -5)

- 차라리 개체를 이동시키는게 편한 것 같다.