改变THREE.js中Canvas画布尺寸，随浏览器动态变化

2023-11-24 18:19:42

在Three.js中，Canvas画布通常用作渲染目标。然而，当浏览器窗口大小发生变化时，Canvas的默认尺寸可能无法动态调整，导致渲染内容出现变形或裁剪。为了解决这个问题，需要一种方法来监视浏览器窗口大小的变化，并相应地调整Canvas尺寸。

在本教程中，我们将介绍一种使用JavaScript事件监听器和WebGL API动态调整Canvas画布尺寸的方法。这种方法可以确保你的Three.js场景始终正确渲染，即使浏览器窗口大小发生了变化。

步骤

1. 创建Canvas元素

首先，我们需要创建一个Canvas元素，作为Three.js渲染目标。可以使用以下代码：

<canvas id="myCanvas"></canvas>

2. 初始化Three.js场景

接下来，我们需要初始化Three.js场景、摄像机和渲染器。确保在初始化期间，渲染器将Canvas元素作为目标：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({canvas: document.getElementById("myCanvas")});

3. 监听窗口大小变化

为了检测窗口大小的变化，我们需要添加一个事件监听器。当窗口大小改变时，它将触发一个回调函数：

window.addEventListener('resize', onWindowResize);

4. 在回调函数中调整Canvas尺寸

在回调函数中，我们需要更新Canvas的尺寸，使其与浏览器窗口大小相匹配。我们可以使用WebGL的viewport方法：

function onWindowResize() {
  // 获取浏览器窗口的新尺寸
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 设置Canvas的尺寸
  renderer.setSize(width, height);

  // 设置摄像机的纵横比
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
}

5. 调用回调函数

最后，我们需要在初始化脚本中调用回调函数，以确保在页面加载时设置正确的Canvas尺寸：

onWindowResize();

示例代码

以下是一个完整的示例，展示了如何在Three.js中动态调整Canvas画布尺寸：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({canvas: document.getElementById("myCanvas")});

    function onWindowResize() {
      const width = window.innerWidth;
      const height = window.innerHeight;

      renderer.setSize(width, height);

      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    }

    window.addEventListener('resize', onWindowResize);

    onWindowResize();

    // 添加Three.js内容...
  </script>
</body>
</html>