Javascript 调整画布/webgl的大小以适应屏幕宽度和高度

您好，我正在尝试让我的画布/webgl将窗口高度和宽度调整到100%，我已经这样做了，但是如果我将窗口从小调整到大，它将不再“缩放/调整”窗口，并且保持小尺寸，有什么想法吗？ JSfiddle：

代码：

---

提前感谢

这是因为渲染器的宽度和高度始终是固定的，并且在调整浏览器窗口的大小时不会改变

要解决这个问题，您需要在调整窗口大小时重置渲染器的宽度和高度，您可以这样做

window.addEventListener('resize', function() {
   renderer.setSize(window.innerWidth, window.innerHeight);
});

这是

全页响应画布 响应窗口调整大小的最佳方法是在动画循环中调整大小，而不是在窗口

resize

事件中调整大小，该事件的触发速率超过DOMs刷新速率的60FPS。这将使调整大小更有效，尤其是在使用鼠标调整窗口大小时

您可以将画布设置为绝对定位

CSS

代码

---

其他的答案都很悲伤。他们都在对抗浏览器，而不是与之合作

可以说，调整three.js大小的最佳方法是使用代码对其进行编码，使其只接受CSS设置的画布大小。这样，无论您如何使用画布，您的代码都可以工作，无需针对不同的情况进行更改

首先，当设置初始纵横比时，没有理由设置它，因为我们将根据画布的大小不同来设置它，所以设置两次只会浪费代码

// There's no reason to set the aspect here because we're going
// to set on resize anyway
const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000);

然后我们需要一些代码来调整画布的大小以匹配其显示大小

function resizeCanvasToDisplaySize(force) {
  const canvas = renderer.domElement;
  // look up the size the canvas is being displayed
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;

  // adjust displayBuffer size to match
  if (force || canvas.width !== width || canvas.height !== height) {
    // you must pass false here or three.js sadly fights the browser
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    // update any render target sizes here
  }
}

在渲染循环中调用此函数，并在初始化时调用一次

function animate(time) {
  time *= 0.001;  // seconds

  resizeCanvasToDisplaySize();

  mesh.rotation.x = time * 0.5;
  mesh.rotation.y = time * 1;

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

resizeCanvasToDisplaySize(true);
requestAnimationFrame(animate);

对于全屏，这是所有需要的css

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

这里有4个示例，示例之间唯一的区别是CSS，以及是我们制作画布还是三个.js制作画布。没有其他代码更改

示例1：全屏，我们制作画布

“严格使用”；
const renderer=new THREE.WebGLRenderer（{canvas:document.querySelector（“canvas”）}）；
//没有理由在这里设置相位，因为我们要
//每帧设置一次
常数照相机=新的三个透视照相机（70,1,1,1000）；
摄像机位置z=400；
const scene=new THREE.scene（）；
const geometry=新的3.BoxGeometry（200200200200）；
const material=新的3.0网格材质({
颜色：0x555555，
镜面反射：0xffffff，
光泽度:50,，
明暗处理：三点明暗处理
});
常量网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
常量灯1=新的三点灯（0xff80C0，2，0）；
灯1.位置。设置（200100300）；
场景。添加（light1）；
函数resizeCanvasToDisplaySize（强制）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
如果（强制| | canvas.width！==宽度| | canvas.height！==高度）{
//必须在此处传递false或在浏览器中传递three.js
设置大小（宽度、高度、假）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
//在此处设置渲染目标大小
}
}
函数动画（时间）{
时间*=0.001；//秒
resizeCanvasToDisplaySize（）；
网格旋转.x=时间*0.5；
网格旋转y=时间*1；
渲染器。渲染（场景、摄影机）；
请求动画帧（动画）；
}
resizeCanvasToDisplaySize（真）；
请求动画帧（动画）
body{margin:0；}
画布{宽度：100vw；高度：100vh；显示：块；}

欢迎！…js中间链路已断开。
function resizeCanvasToDisplaySize(force) {
  const canvas = renderer.domElement;
  // look up the size the canvas is being displayed
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;

  // adjust displayBuffer size to match
  if (force || canvas.width !== width || canvas.height !== height) {
    // you must pass false here or three.js sadly fights the browser
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    // update any render target sizes here
  }
}

function animate(time) {
  time *= 0.001;  // seconds

  resizeCanvasToDisplaySize();

  mesh.rotation.x = time * 0.5;
  mesh.rotation.y = time * 1;

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

resizeCanvasToDisplaySize(true);
requestAnimationFrame(animate);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }