【Three.js】知识梳理二十四：浏览器窗口变动自适应

在 Three.js 项目中，为了确保渲染内容在窗口大小变化时能够正确自适应，我们需要监听 window 的 resize 事件，并更新相机和渲染器的参数。本文将展示如何实现这一功能。

1. 初始化场景、相机和渲染器

首先，我们初始化 Three.js 场景、相机和渲染器。

// 初始化场景
const scene = new THREE.Scene();
​
// 初始化相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
​
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
​
// 创建一个简单的几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

2. 监听 resize 事件

接下来，我们添加一个事件监听器，监听 window 的 resize 事件，并在事件触发时更新相机的宽高比和渲染器的尺寸。

window.addEventListener('resize', onWindowResize, false);
​
function onWindowResize() {
    // 更新相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    // 更新渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
}

3. 渲染场景

最后，我们设置渲染循环，以便在窗口大小变化时重新渲染场景。

function animate() {
    requestAnimationFrame(animate);
​
    // 添加旋转动画
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
​
    renderer.render(scene, camera);
}
​
animate();

通过监听 window 的 resize 事件，我们可以在浏览器窗口大小变化时动态调整相机和渲染器的参数，使 Three.js 场景能够自适应窗口的变化。这种方法对于构建响应式 3D 应用至关重要。