3つのjs穴が形状にレンダリングされない

Question

私はフレームを作成するために真ん中に穴を持つ単純なパラメータ化された形状（長方形）を作成しようとしています。悲しいことに、穴は作られていません。コンソールにはTHREE.ShapeUtils: Infinite Loop! Holes left:" + indepHoles.length + ", Probably Hole outside Shape!と書かれていますが、セッションをデバッグした後は間違っています。これは、xが含まれるコメントが私のコードで、.currentpoint

var frameblock = new THREE.Shape(); 
frameblock.moveTo(topleft.x - 2*99/Math.SQRT2,topleft.y + 2*99/Math.SQRT2); // move to topleft x: -570 y: 410 
frameblock.lineTo(topright.x + 99/Math.SQRT2,topright.y + 2*99/Math.SQRT2); // draw to topright x: 1092 y: 410 
frameblock.lineTo(bottomright.x + 2* 99/Math.SQRT2 ,bottomright.y - 99/Math.SQRT2); //draw to bottomright x: 1092 y: -570 
frameblock.lineTo(topleft.x - 2*99/Math.SQRT2,bottomleft.y - 99/Math.SQRT2); //draw to bottomleft x: -570 y:-570 
frameblock.lineTo(topleft.x - 2*99/Math.SQRT2,topleft.y + 2*99/Math.SQRT2); // draw to topleft x: -570 y: 410 

var framehole = new THREE.Path(); 
framehole.moveTo(topleft.x - 99/Math.SQRT2,topleft.y + 99/Math.SQRT2); // move to topleft x: -500 y: 340 
framehole.lineTo(topright.x,topright.y + 99/Math.SQRT2); // draw to topright x:1022 y:340 
framehole.lineTo(bottomright.x + 99/Math.SQRT2 ,bottomright.y); //draw to bottomright x:1022 y:-500 
framehole.lineTo(topleft.x - 99/Math.SQRT2,bottomleft.y); //draw to bottomleft x: -500 y: -500 
framehole.lineTo(topleft.x - 99/Math.SQRT2,topleft.y + 99/Math.SQRT2); // draw to topleft x: -500 y: 340 

frameblock.holes.push(framehole); 

var framegeometry = new THREE.ShapeGeometry(frameblock); 

Answer 1

のy座標は、問題は、それが反時計回りに描かれていなかったでした。正しい順序は：

var frameblock = new THREE.Shape(); 
frameblock.moveTo(topleft.x - 2*99/Math.SQRT2,topleft.y + 2*99/Math.SQRT2); // move to topleft x: -570 y: 410 
frameblock.lineTo(topleft.x - 2*99/Math.SQRT2,bottomleft.y - 99/Math.SQRT2); //draw to bottomleft x: -570 y:-570 
frameblock.lineTo(bottomright.x + 2* 99/Math.SQRT2 ,bottomright.y - 99/Math.SQRT2); //draw to bottomright x: 1092 y: -570 
frameblock.lineTo(topright.x + 99/Math.SQRT2,topright.y + 2*99/Math.SQRT2); // draw to topright x: 1092 y: 410 
frameblock.lineTo(topleft.x - 2*99/Math.SQRT2,topleft.y + 2*99/Math.SQRT2); // draw to topleft x: -570 y: 410 

var framehole = new THREE.Path(); 
framehole.moveTo(topleft.x - 99/Math.SQRT2,topleft.y + 99/Math.SQRT2); // move to topleft x: -500 y: 340 
framehole.lineTo(topleft.x - 99/Math.SQRT2,bottomleft.y); //draw to bottomleft x: -500 y: -500 
framehole.lineTo(bottomright.x + 99/Math.SQRT2 ,bottomright.y); //draw to bottomright x:1022 y:-500 
framehole.lineTo(topright.x,topright.y + 99/Math.SQRT2); // draw to topright x:1022 y:340 
framehole.lineTo(topleft.x - 99/Math.SQRT2,topleft.y + 99/Math.SQRT2); // draw to topleft x: -500 y: 340 



frameblock.holes.push(framehole); 

です