javascript - Three.js:调整渲染 Canvas 的大小(GPU饥饿的片段着色器)

我正在使用three.js运行资源匮乏的片段着色器。我将渲染尺寸设置为800 * 600，以确保着色器即使在低端卡上也能流畅运行。

我正在这样设置渲染 Canvas :

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 header 中做width:100％;高度:100％;

这并没有多大帮助，因为Three.js在canvas1的顶部创建了尺寸为800 * 600的新 Canvas 。
缩放Three.js渲染 Canvas 以匹配Web浏览器窗口大小而不触及渲染大小的最佳方法是什么？

最佳答案

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

将canvas1传递给WebGLRenderer作为渲染目标。

然后删除:
document.body.appendChild(renderer.domElement);
因为我们在dom中已经有canvas1元素。

Three.js文档有时有点棘手，
{ Canvas : }，
传递参数。

关于javascript - Three.js:调整渲染 Canvas 的大小(GPU饥饿的片段着色器)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19527492/