javascript - THREE.js:用另一个形状在形状上打洞

Question

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

假设我有一个 donut 形状:一个内部有孔的圆盘。图书馆给了我一个代表圆盘的 THREE.Shape 和一个代表洞的 THREE.Shape。

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

那么有没有办法从THREE.Shape 中获取THREE.Path？或者有没有办法用另一个 THREE.Shape 在 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 );

见 fiddle here 这表明这两种解决方案都有效...