[Three.js] Three.js 다양한 도형 객체 group으로 렌더링하는 방법

현재, WMS를 Three.js 라이브러리를 사용하여 시각화를 기반으로 이것저것 기능을 만들고 있다. 시각화를 할 때, 정말 중요한게 여러 도형 객체들을 group을 설정하여 관리를 해야 한다는 것이다. 그래서, 이번 글에서는 Three.js 다양한 도형 객체 group으로 렌더링하는 방법에 대해 기록한다.

---

Three.js 다양한 도형 객체 group으로 렌더링하기

맨 처음, Three.js를 시작할 때 정육면체 큐브를 1개 만들고 그 하나를 scene에 add를 하여 렌더링을 하는게 가장 기초적인 예제였다.

 

근데, 이제는 이러한 각 큐브들을 옵션을 주고, 특정 옵션을 가진 큐브들을 1개의 Group으로 만들어 한꺼번에 scene에 add를 하여 렌더링을 하는게 체계적인 렌더링 방법이라고 할 수 있겠다.

 

아래는 bin이라는 큐브를 만들어서, binGroup에 add를 하고, 해당 binGroup을 scene에 add를 하여 렌더링하는 코드다.

// Bin의 geometry 생성
var binGeometry = new THREE.BoxGeometry(
    Number((length / equalInfoBase.SECQTY / loc_count) * 0.9),
    Number(level_height * 0.9),
    width * 0.9
);

// Bin material 생성 (전체 색상)
var binMaterial = new THREE.MeshBasicMaterial({ 
    color: itemColor,
    transparent: true, 
    opacity: 1.0  // 투명도
});

// Bin mesh 생성
var bin = new THREE.Mesh(binGeometry, binMaterial);

// Bin을 binGroup에 추가
this.binGroup.add(bin);

// Bin 그룹 생성
this.binGroup = new THREE.Group();
this.scene.add(this.binGroup);