Projection Matrix

pixgram·2022년 1월 14일
0

Projection Matrix(투영행렬)이란?

three.js에서 canvas를 리사이즈 할때 요소들이 이상하게 보이지 않게 하려면 다음과 같은 작업을 해줘야 한다.

this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();

updateProjectionMatrix()라는 것은 3점 좌표(x, y, z)를 2점 좌표(x, y)로 바꾸는 작업이다. 소실점 계산이라고 생각하면 이해하기 쉽다. 캔버스가 리사이즈 되었으니 당연히 소실점도 바껴야 할것이다.

profile
Interactive Front-end Developer and WebGL Artist

0개의 댓글