Javascript THREE.js：使用另一个形状在形状中打孔

我正在使用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

上打孔？

有一种方法可以用于使用

THREE.js

网格执行布尔运算。那可能对你有好处

这个库有点过时，但是有很多fork也与最新的

Three.js

版本兼容

编辑： 我认为使用点数组将形状转换为路径并不困难

var shape = ... your shape ...

var points = shape.extractAllPoints();

var path = new THREE.Path( points );

未经测试，但我认为它应该有效。

我再次在这里发帖，因为我最近意识到这个问题的答案太简单，不可能是真的，值得单独提及

---

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 );

---

查看一个小提琴，它演示了两种解决方案都有效…

我不使用网格。我正在处理形状和路径。@BobWoodley因为你在谈论拉伸形状，我认为一个解决方案可以是先拉伸两个形状，然后用三个CSG减去它们。。。我编辑了我的答案。重要提示！这是很重要的，你在哪个方向创建你的形状！在我的例子中，我试着制作正方形0,010,010,010,010,010,0，然后是同一个正方形，但比洞小一点。不走运！只有当我向后“旋转”它时，它才起作用。@ManeatingKoala您可以使用

THREE.Path的文档来查找所有可用于定义形状和孔的方法：