Mesh의 일정 영역을 잘라내기
2016년 08월 29일
CSG.js와 ThreeCSG.js를 활용한 3D 모델 조작
csg.js
는 두 개의 3D 모델이 겹쳐있을 때 하나로 합치거나 겹쳐있는 영역만 빼야 하는 경우에 사용할 수 있는 라이브러리이다.
ThreeCSG.js
를 사용하면 csg.js
를 Three.js에서도 사용할 수 있다.
아래는 육면체에서 겹쳐져 있는 구만큼의 영역을 지우는 예제이다.
csg.js와 ThreeCSG.js를 가져온다.
<script src="js/csg.js"></script>
<script src="js/ThreeCSG.js"></script>
육면체와 구 생성
// 육면체
var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
var cube = new THREE.Mesh(cubeGeometry);
// 구
var sphereGeometry = new THREE.SphereGeometry(3, 10, 10);
var sphere = new THREE.Mesh(sphereGeometry);
sphere.position.y = 5;
ThreeBSP 생성
각각 육면체와 구의 mesh
를 ThreeBSP
에 넘겨준다.
var cubeBsp = new ThreeBSP(cube);
var sphereBsp = new ThreeBSP(sphere);
subtract 함수로 육면체에서 구를 뺀다.
var subtractBsp = cubeBsp.subtract(sphereBsp);
// toMesh 함수를 실행하면 THREE.Mesh를 반환받는다.
var result = subtractBsp.toMesh(new THREE.MeshPhongMaterial({ color: 0xcccccc }));
scene.add(result);
https://302chanwoo.com/lab/three/csg_basic.html