[Three.js] Three.js BoxGeometry 정리

이번 글에서는 Three.js에서 BoxGeometry를 사용하여 정육면체를 그리는 방법에 대해 기록한다.

---

Three.js BoxGeometry 정리

Three.js에서 박스 또는 정육면체를 그릴 때 BoxGeometry를 사용한다.

Three.js 도큐먼트를 보면, BoxGeometry에 대한 내용을 제공해 준다.

 

예제 코드

const geometry = new THREE.BoxGeometry(
	width
	, height
	, depth
);

const material = new THREE.MeshBasicMaterial( { color: Number(itemDrawInfo.drawInfo.LCOLOR)} );
itemDrawInfo.drawObj = new THREE.Mesh( geometry, material );

itemDrawInfo.drawObj.position.set(
	tempLocaX1
	, floorHeight+(itemHeight/2)
	, tempLocaY1
);

this.scene.add( itemDrawInfo.drawObj );

 

 

일단, BoxGeometry로 width, height, depth만큼의 객체를 생성한다.

그리고 나서, position.set을 통해 해당 객체를 그릴 위치를 잡아주는데, 이 position에 대한 기준은 객체의 중심점이다.

 

그래서, 만약 0,0,0 기준으로 그리고 싶다면 해당 객체의 width, height, depth 절반 만큼을 계산해서 적용하면 된다.

---

참고

https://threejs.org/docs/#api/ko/geometries/BoxGeometry

three.js docs