设置Three.js响应式画布

为了使Three.js创建的画布响应式，需要在窗口大小变化时更新相机的宽高比和渲染器的大小。这通常涉及到添加一个事件监听器来监听resize事件，并在事件触发时执行相应的更新函数。

// 设置初始渲染器和相机尺寸
const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera(...);// 添加事件监听器
window.addEventListener('resize', () => {// 更新渲染器大小renderer.setSize(window.innerWidth, window.innerHeight);// 更新相机的宽高比camera.aspect = window.innerWidth / window.innerHeight;// 更新相机的投影矩阵camera.updateProjectionMatrix();
});// 将渲染器的DOM元素添加到页面中
document.body.appendChild(renderer.domElement);