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

在主體元素，我有

<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元素。

Three.js文檔有時候有點棘手， {canvas：}， 要傳參數。