1

我是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()' 渲染平面和圆的工作原理，我在 HTML 中附加了 three-js-csg、csg和three-2-csg以希望得到一些东西工作。有什么明显的错误吗？

谢谢。

4

1 回答 1

2

CSG 不适用于两个非流形几何。你的平面和圆是无限薄的，所以从另一个减去一个的数学是行不通的。

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

于 2021-01-09T23:25:07.603 回答