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:}.