DOM 변환 좌표와 일치하도록 Three.js 좌표계를 어떻게 바꿀 수 있습니까?

Question

예를 들어, DOM과 마찬가지로 장면의 상단/왼쪽에서 Three.js의 위치 0,0,0을 어떻게 시작할 수 있습니까?

위치가 0,0,0 일 때 왼쪽 상단에 표시되고 크기는 CSS 픽셀 크기가되고이 크기는 변경되지 않습니다. 뷰포트가 변경됩니다. 크기가 10 인 경우 CSS Px 10 개가 화면에 스패닝된다는 의미입니다 (Z = 0 인 경우).

---

편집 : 내가 인식되지 않았 음을 상대적으로 새로운 공식 Three.js를 포럼에이 질문을 이동 해요 : 당신은 올바른 철자를 설정해야 https://discourse.threejs.org/t/how-can-we-make-three-js-scenes-use-dom-style-coordinates/962

Answer 1

(대신 관점) 투영 행렬을 사용하여 픽셀의 캔바스 크기에 맞 춥니 다.

: 그래서 픽셀의 화면 공간과 일치하는 세계 공간 (16 개 수레 배열에 정의 된 4 × 4 행렬을 가정)을 따를 때

S 0 0 0 | S = 2/right - left 
0 T 0 0 | T = 2/top - bottom 
0 0 U 0 | U = -2/far-near 
Tx Ty Tz 1 | 

당신은 투영 행렬을 정의 할 수 있습니다 : 직교 투영 행렬은 다음과 같이 구축

view[ 0] = 2.0/(canvasWidth); 
view[ 5] = 2.0/-(canvasHeight);  // Negate to invert Y coordinates 
view[10] = -2.0/farClip - nearClip; 
view[12] = -1.0;      // Translate X so left border start at 0 
view[13] = 1.0;      // Translate Y so top border start at 0 
view[14] = 0.0; 
view[15] = 1.0; 

이제 이것을 Three.js에서 설정하는 방법을 찾아야합니다.