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

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 网格执行布尔运算。这可能适合你。

该库有点过时，但有许多分支也与最新的 Three.js 版本兼容。

编辑：

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

var shape = ... your shape ...

var points = shape.extractAllPoints();

var path = new THREE.Path( points );

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

Answer 2

我post又来了，因为最近发现这个问题的答案简直太简单了，不值得单独一提。

THREE.Shape extends 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 证明这两种解决方案都有效...

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

THREE.js: Punch hole in Shape with another Shape

javascript

three.js

编辑：