Question

我正在使用D3-threeD2.js将SVG文件转换为THREE.Shape（s），然后我可以使用three.js进行拉伸。除孔外，它的工作正常。

让我们说我有一个甜甜圈形状：一个内有洞的圆盘。该库为我提供了一个代表光盘的THREE.Shape和一个代表该洞的THREE.Shape。

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

那么有没有办法从THREE.Path获得THREE.Shape？或者，有没有办法在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 );

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

Answer 2

GitHub上有一个ThreeCSG enter link description here库，可用于使用Three.js网格执行布尔操作。这可能适合你。

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

编辑：

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

var shape = ... your shape ...

var points = shape.extractAllPoints();

var path = new THREE.Path( points );

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

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

2 个答案:

编辑：