三.js:调整渲染画布的大小(GPU 饥饿片段着色器）

Three.js: Resize rendering canvas (GPU hungry fragment shader)

本文关键字：饥饿 GPU 片段 调整 js      更新时间：2023-09-26

我正在运行三个资源饥渴的片段着色器.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 浏览器窗口大小的最佳方法是什么？

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

将 canvas1 传递给 WebGLRenderer 作为呈现目标。

然后删除： document.body.appendChild（ renderer.domElement ）;因为我们的 DOM 中已经有 canvas1 元素。

三.js文档有时有点棘手， { 画布： }，以传递参数。

相关文章：