Three.js: Zmienianie rozmiaru obszaru roboczego renderowania (moduł cieniujący fragmentem GPU)

Question

Używam modułu cieniującego fragmentu zasobów z plikiem three.js. Mam ustawiony rozmiar renderingu do 800 * 600, aby moduł cieniujący działał gładko nawet na kartach o niskich wymaganiach.

jestem ustawiania moje płótna renderingu tak:

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

Na elemencie body mam

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

Jestem wtedy w nagłówku css robi width: 100%; wysokość: 100%;

To niewiele pomaga, ponieważ Three.js tworzy nowe płótno o wielkości 800 * 600 na płótnie1. Jakie jest najlepsze podejście do powiększania płótna renderującego Three.js, aby dopasować rozmiar okna przeglądarki, bez dotykania rozmiaru renderowania?

Answer 1

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

Przekazuje canvas1 do WebGLRenderer jako cel wyświetlania.

Następnie usuń: document.body.appendChild (renderer.domElement); jak już mamy element canvas1 w naszej domenie.

Dokumentacja Three.js czasami jest trudna, {canvas:}, do przekazania parametru.