Three.js - 为什么 csg.js 不适用于布尔运算？

问题描述

我是three.js 和csg.js 的新手。我已经创建了一个这样的基本场景：

// Create scene
const scene = new THREE.Scene();
// Create perspective camera - FOV,aspect ratio,near + far clipping plane
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);
// Create renderer
const renderer = new THREE.Webglrenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

我正在尝试从平面中减去一个圆。

// Create plane geometry
const pgeometry = new THREE.PlaneGeometry();
const pmaterial = new THREE.MeshBasicMaterial({color: 0xE8ADAA,opacity: 0.7,transparent: true});
const plane = new THREE.Mesh(pgeometry,pmaterial);
plane.position.z = 3;

// Create circle BoxGeometry
const ogeometry = new THREE.CircleGeometry(0.5,32);
const omaterial = new THREE.MeshBasicMaterial({color: 0xE8ADAA});
const circle = new THREE.Mesh(ogeometry,omaterial);
circle.position.z = 3;

// CSG test
const bspPlane = new ThreeBSP(plane);
const bspCircle = new ThreeBSP(circle);
const bspResult = bspPlane.subtract(bspCircle);
const result = bspResult.toMesh();
scene.add(result);

（然后我在最后有这个，从相机渲染场景。）

// Camera position on z-axis
camera.position.z = 5;
// Render scene from camera
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene,camera);
}
animate();

three.js 部分（使用`scene.add()' 渲染平面和圆圈有效，我已经将three-js-csg、csg 和three-2-csg HTML，希望能有所作为。有什么明显的错误吗？

谢谢。

解决方法

CSG 不适用于两个非流形几何体。您的平面和圆无限薄，因此从另一个中减去一个的数学方法不起作用。

您需要使用具有“内部”和“外部”的几何体，因此不要使用平面，而是使用深度较小的立方体。使用圆柱体代替圆形。

javascript three.js threecsg