Question

我尝试创建一个带孔的简单矩形，使用主要几何体的形状和孔的路径，如下所示：

    var shape = new THREE.Shape();
    shape.moveTo(0, -100);
    shape.lineTo(0, 100);
    shape.lineTo(400, 100);
    shape.lineTo(400, -100);

    var hole = new THREE.Path();
    hole.moveTo(25, -75);
    hole.lineTo(25, 75);
    hole.lineTo(375, 75);
    hole.lineTo(375, -75);

    shape.holes.push(hole);
    geometry = new THREE.ShapeGeometry(shape);

从这段代码中我得到一个像这样的控制台错误：

无限循环！留下的洞：1，可能是形状外的洞！

我做错了吗？据我所知，从硬编码的坐标中，孔的坐标位于大的形状内。

我已经看了一些similar answers和examples，但我无法看到差异或遗漏的内容。

Answer 1

以逆时针方式指定您的点数。

var shape = new THREE.Shape();
shape.moveTo(0, -100);
shape.lineTo(400, -100);
shape.lineTo(400, 100);
shape.lineTo(0, 100);

var hole = new THREE.Path();
hole.moveTo(25, -75);
hole.lineTo(375, -75);
hole.lineTo(375, 75);
hole.lineTo(25, 75);

three.js r.68

Answer 2

我相信你必须关闭这条道路。所以添加

shape.lineTo(0, -100);

和洞

hole.lineTo(25, -75);

单孔形状：＆＃34;可能是外形孔！＆＃34;

2 个答案: