单孔形状:"可能是外形孔!"

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,可能是外形孔!

难道我做错了什么？据我所知,从硬编码的坐标中,孔的坐标位于大的形状内.

我已经看过一些类似的 答案和例子,但我无法看到差异或缺少什么.

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