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渲染畫布以匹配Web瀏覽器窗口大小而不觸及渲染大小的最佳方法？

Answer 1

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

將canvas1傳遞給WebGLRenderer作為渲染目標。

然后刪除：document.body.appendChild（renderer.domElement）; 因為我們已經在我們的dom中有canvas1元素。

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