單孔形狀：「可能孔外形！」

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);