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

Question

我正在使用 D3-threeD2.js 将 SVG 文件转换成THREE.Shape（s），然后我可以用three.js挤压。除了孔之外，它工作正常。

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

我知道如果THREE.Path我有一个THREE.Shape.

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

Answer 1

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

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

请参阅此处的小提琴，它表明这两种解决方案都有效...