[Three.js] Transform

[오늘 배운 것들]

• mesh 이동하기
• mesh 크기 조정하기
• mesh 회전하기
• Scene Graph: 그룹 만들기

 

이동하기

 

mesh.position.x = 2;

 

mesh의 position 속성을 변화시킴으로써 물체를 이동시킬 수 있다.

 

mesh.position.set(1,1,1);

 

set을 통해 x, y, z 좌표 한 번에 변화시킬 수 있다.

 

console.log(mesh.position.length());
console.log(mesh.position.distanceTo(new THREE.Vector3(1.5,1.5,1.5)));

 

mesh.position에는 length와 distanceTo 함수가 있는데 각각 현재 위치에서 원점과의 거리(length), 인자로 받은 벡터와의 거리(distanceTo)를 반환한다.

 

 

크기 조절

 

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

 

위치 변경과 마찬가지로 mesh.scale 속성을 통해 변경할 수 있다.

 

 

 

회전

 

mesh.rotation.x = THREE.MathUtils.DEG2RAD(45);//radian
mesh.rotation.x = Math.PI / 4;
mesh.rotation.x = 1;
mesh.rotation.x += delta;

 

다양한 방법으로 각도 표현이 가능하다. 이전에 배웠기 때문에 자세히는 다루지 않음.

 

//축까지 돌리기
	mesh.rotation.reorder('YZX');//firstrotated-second-final

 

회전 기준축을 돌리는 방법. x, y, z 축 방향으로 모두 회전할 일이 있을때 쓰임.

mesh.rotation.reorder를 통해 돌릴 수 있고, 인자로 넣은 문자열에 있는 축의 순서대로 적용된다.

x 축으로 20도, y축으로 50도, z축으로 30도 돌린다면,

'yzx'를 넣었을 y축으로 먼저 돌리고 z축으로 돌리고 x축으로 마지막으로 돌리는 식.

 

 

 

 

그룹 만들기

 

태양계 모형을 만들려고 한다.

태양, 지구, 달 세 개의 mesh가 필요하고 지구와 달은 각자의 자전과 공전을 수행하도록 하려면?

 

Group1 - 태양, Group2

Group2 - 지구, Group3

Group3 - 달

 

이렇게 구성하면 된다. 그리고 각각의 그룹을 회전하도록 하면 태양계 모형을 만들 수 있다.

 

 

// Mesh
	const geometry = new THREE.BoxGeometry(1, 1, 1);
	const material = new THREE.MeshStandardMaterial({
		color: 'seagreen'
	});
	const group1 = new THREE.Group();
	const box1 = new THREE.Mesh(geometry, material);

	const group2 = new THREE.Group();
	const box2 = box1.clone();
	box2.scale.set(0.3,0.3,0.3);
	group2.position.x = 2;

	const group3 = new THREE.Group();
	const box3 = box2.clone();
	box3.scale.set(0.15,0.15,0.15);
	box3.position.x = 0.5;

	group3.add(box3);
	group2.add(box2, group3);
	group2.add(box2);
	group1.add(box1, group2);

	scene.add(group1);

 

글로 설명한 구조를 코드로 옮겼다.

 

 

//그룹 회전(Scene Graph)
		group1.rotation.y += delta;
		group2.rotation.y += delta;
		group3.rotation.y += delta;

 

 

각각의 그룹을 회전시키면

 

 

 

(움직이지 않는 스크린샷이지만 실제로 돌려보면 움직이고 있다.)

 

이렇게 움직이는 태양계 모형이 완성된다.