单孔形状：“可能孔外形！”

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，可能是孔外形！

我做错了什么？就我从硬编码坐标中看到的那个孔来说，它的坐标是在大的形状内部。

我看了一些similaranswers和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);