[Three.js] Three.js 테두리 제거하는 방법(wireframe)

Three.js에서 Mesh를 그릴 때 테두리를 제거하는 방법은 해당 도형의 Wireframe을 false로 설정하면 된다.

---

Three.js Mesh 테두리 제거하는 방법

아래와 같이, 대부분 Box 지오메트리를 설정하고, MeshBasicMaterial에 추가를 한다.

여기서, wireframe이 원래는 default가 false이다.

wireframe을 false로 설정하면 아래와 같이, 테두리가 없는 상태가 된다.

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: false });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

 

wireframe을 true로 설정할 경우에는 아래와 같이 도형의 스켈레톤만 나오게 된다.

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);