3 개의 js 구멍이 모양으로 렌더링되지 않았습니다

Question

중간에 구멍이있는 간단한 매개 변수화 된 모양 (직사각형)을 만들어 프레임을 만듭니다. 슬프게도 구멍이 생기지 않습니다. 콘솔에 THREE.ShapeUtils: Infinite Loop! Holes left:" + indepHoles.length + ", Probably Hole outside Shape!라고 표시되지만 디버깅 세션을 마친 후에 잘못된 것으로 나타납니다. 이것은 Y는 문제가 시계 반대 방향으로 그려지지이었다 .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

의 좌표, X를 포함 코멘트를 내 코드입니다. 올바른 순서는 다음과 같습니다.

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