Three.js : 렌더링 캔버스 크기 조정 (GPU 배고 프랜지 쉐이더)

Question

리소스 굶주린 프래그먼트 셰이더를 three.js로 실행 중입니다. 나는 렌더링 카드의 크기를 800 * 600으로 설정해 쉐이드가 로우 엔드 카드에서도 부드럽게 돌아가도록합니다.

내가 이렇게 내 렌더링 캔버스를 설정하고있다 :

var canvas1 = document.getElementById('canvas1') ; 
renderer = new THREE.WebGLRenderer(canvas1); 
renderer.setSize(800, 600); 
renderer.autoClear = false; 
document.body.appendChild(renderer.domElement); 

body 요소에 나는

<canvas id='canvas1' style=" position: absolute; left: 0; top: 0; z-index: -10; background-color: #000000; "></canvas> 

내가 폭을하고 CSS를 헤더에 다음 생각이 : 100 %; 높이 : 100 %;

Three.js가 canvas1 위에 800 * 600 크기의 새 캔버스를 작성하므로 많은 도움이되지 않습니다. 렌더링 크기를 변경하지 않고 웹 브라우저 창 크기와 일치하도록 Three.js 렌더링 캔버스를 확대하는 가장 좋은 방법은 무엇입니까?

Answer 1

renderer = new THREE.WebGLRenderer({ canvas: canvas1 }); 

렌더링 대상으로 canvas1에 WebGLRenderer를 전달합니다.

다음을 제거하십시오. document.body.appendChild (renderer.domElement); 우리는 이미 dom에 canvas1 요소가 있습니다.

가끔씩 세 개의 .js 설명서가 약간의 번거 로움이 있습니다. {캔버스 :}, 매개 변수 전달.