Javascript 如何在three.js中创建窗、孔或减去几何体

我刚接触过three.js，需要创建一个带门窗的“房间”。这是一项简单的任务，但我没有找到最新的答案

类似的问题如下： - -

在我的例子中，我有一个大盒子，我想减去一个小盒子：

谢谢你帮助我

一个选项是使用/减去几何体

创建构成立方体几何体的三个BSP对象：

var-geometry\u Y=新的三个BoxBufferGeometry（1.5,1.5,0.99）；
var geometry_A=新的三个BoxBufferGeometry（0.7,0.7,0.7）；
几何平移（0.5,0.5,0）；
var bsp_A=新的三个bsp（几何体_A）；
var bsp_Y=新的三个bsp（几何体_Y）；

减去几何图形并创建一个：

请参见示例：

（函数onLoad（）{
var容器、摄影机、场景、渲染器、控件；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
container.appendChild（renderer.domeElement）；
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xffffff）；
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机。位置。设置（3，1，-1）；
场景。添加（摄影机）；
window.onresize=函数（）{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
}
var环境光=新的三个环境光（0x404040）；
场景。添加（环境光）；
var方向光=新的三个方向光（0xffffff，0.5）；
方向光位置x=4；
方向光位置y=1；
方向光.position.z=-2；
场景。添加（方向光）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
addGridHelper（）；
createModel（）；
}
函数createModel（）{
var geometry_Y=新的3.BoxBufferGeometry（1.5,1.5,0.99）；
var geometry_A=新的三个BoxBufferGeometry（0.7,0.7,0.7）；
几何平移（0.5,0.5,0）；
var bsp_A=新的三个bsp（几何体_A）；
var bsp_Y=新的三个bsp（几何体_Y）；
var bsp_YsubA=bsp_Y.减法（bsp_A）；
var bsp_mesh=bsp_YsubA.toMesh（）；
bsp_mesh.material=新的三个.MeshLambertMaterial（{color:0x00ff00}）；
场景.添加（bsp_网格）；
}
函数addGridHelper（）{
var helper=新的三个.GridHelper（10,10）；
helper.material.opacity=0.25；
helper.material.transparent=true；
场景.添加（助手）；
var轴=新的三轴辅助（100）；
场景。添加（轴）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}
})();

一个选项是使用/减去几何图形

创建构成立方体几何体的三个BSP对象：

var-geometry\u Y=新的三个BoxBufferGeometry（1.5,1.5,0.99）；
var geometry_A=新的三个BoxBufferGeometry（0.7,0.7,0.7）；
几何平移（0.5,0.5,0）；
var bsp_A=新的三个bsp（几何体_A）；
var bsp_Y=新的三个bsp（几何体_Y）；

减去几何图形并创建一个：

请参见示例：



（函数onLoad（）{
var容器、摄影机、场景、渲染器、控件；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
container.appendChild（renderer.domeElement）；
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xffffff）；
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机。位置。设置（3，1，-1）；
场景。添加（摄影机）；
window.onresize=函数（）{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
}
var环境光=新的三个环境光（0x404040）；
场景。添加（环境光）；
var方向光=新的三个方向光（0xffffff，0.5）；
方向光位置x=4；
方向光位置y=1；
方向光.position.z=-2；
场景。添加（方向光）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
addGridHelper（）；
createModel（）；
}
函数createModel（）{
var geometry_Y=新的3.BoxBufferGeometry（1.5,1.5,0.99）；
var geometry_A=新的三个BoxBufferGeometry（0.7,0.7,0.7）；
几何平移（0.5,0.5,0）；
var bsp_A=新的三个bsp（几何体_A）；
var bsp_Y=新的三个bsp（几何体_Y）；
var bsp_YsubA=bsp_Y.减法（bsp_A）；
var bsp_mesh=bsp_YsubA.toMesh（）；
bsp_mesh.material=新的三个.MeshLambertMaterial（{color:0x00ff00}）；
场景.添加（bsp_网格）；
}
函数addGridHelper（）{
var helper=新的三个.GridHelper（10,10）；
helper.material.opacity=0.25；
helper.material.transparent=true；
场景.添加（助手）；
var轴=新的三轴辅助（100）；
场景。添加（轴）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}
})();


你可以试试我的CSG库。它比其他threejs csg解决方案更健壮。

你可以试试我的CSG库。它比其他三个JS csg解决方案更健壮
var material = new THREE.MeshBasicMaterial({color: 0xffff00});
var faceMaterial_Y = new THREE.MeshLambertMaterial( { color: 0x0087E6 } );
var faceMaterial = new THREE.MeshLambertMaterial( { color: 0x0087E6 } );
var geometry_Y = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.99 );
var faceMaterial_Y = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
var cube_Y = new THREE.Mesh( geometry_Y, faceMaterial_Y);

scene.add(cube_Y);

var geometry_A = new THREE.BoxBufferGeometry( 0.7, 0.7, 0.7 );
material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var faceMaterial_A = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var cubeA = new THREE.Mesh( geometry_A, material );
cubeA.position.set( 0.5, 0.5, 0 );

// HOW TO SUBTRACT cube_Y - cubeA?

//create a group and add the three cubes 
var group = new THREE.Group();
group.add( cubeA );
group.add( cube_Y );
scene.add( group );

var bsp_YsubA = bsp_Y.subtract(bsp_A);
var bsp_mesh = bsp_YsubA.toMesh();
bsp_mesh.material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );

scene.add( bsp_mesh );