javascript - 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: } 来传递参数。