THREE.js：用另一个 Shape 在 Shape 上打孔

Question

我正在使用 D3-threeD2.js 将 SVG 文件转换为 THREE.Shape(s)，然后我可以使用 three.js 进行挤压。除了孔，它工作正常。

假设我有一个甜甜圈形状：一个里面有一个洞的圆盘。图书馆给了我一个THREE.Shape 代表光盘和一个THREE.Shape 代表孔。

我知道如果我有 THREE.Path，我可以在光盘上打一个洞，但我没有 - 我有一个 THREE.Shape。

那么有没有办法从THREE.Shape 获得THREE.Path？或者有没有办法用另一个THREE.Shape 在THREE.Shape 上打一个洞？

Answer 1

有一个ThreeCSG library on GitHub 可用于使用Three.js 网格执行布尔运算。这可能适合你。

这个库有点过时了，但是有很多 fork 也兼容最新的Three.js 版本。

编辑：

我认为使用点数组将形状转换为路径应该不难。

var shape = ... your shape ...

var points = shape.extractAllPoints();

var path = new THREE.Path( points );

未经测试，但我认为它应该可以工作。

Answer 2

我再次在这里发帖，因为我最近意识到这个问题的答案几乎太简单了，不值得单独提及。

---

THREE.Shape 扩展THREE.Path，您可以简单地使用THREE.Shape 通过将其添加为孔来直接在其他形状上打孔。

我以两种不同的方式对其进行了测试。直接使用形状：

var shape = new THREE.Shape();
//...define your shape

var hole = new THREE.Shape();
//...define your hole

shape.holes.push( hole );
shape.extrude( extrusionSettings );

但是，如果您使用toShapes 方法创建形状路径，它也可以工作：

var path = new THREE.Path();
//...define your path
var shape = path.toShapes()[0];

var hole = new THREE.Shape();
//...define your hole
var holes = hole.toShapes();

shape.holes = holes;
shape.extrude( extrusionSettings );

查看小提琴 here，它表明两种解决方案都有效...