如何在窗口尺寸变化时始终让Three.js创建的3D球体保持屏幕居中

嘿，这个问题我之前做Three.js项目时也踩过坑！窗口调整尺寸后球体不再居中，本质是因为你只在初始化时设置了相机的宽高比（aspect）和渲染器尺寸，窗口变化后这些参数没有同步更新，导致相机的投影矩阵和实际窗口不匹配，最终画面出现偏移。

需要做的修改 #

你需要给窗口添加一个resize事件监听器，在窗口尺寸变化时同步更新渲染器和相机的关键参数：

• 更新渲染器的尺寸以匹配新窗口
• 更新相机的宽高比
• 必须更新相机的投影矩阵（这是最容易漏掉的一步！）

修改后的完整代码 #

<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

camera.position.z = 3;

// 添加窗口resize事件监听器
window.addEventListener('resize', function() {
    // 更新渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 更新相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 重新计算相机投影矩阵，这一步必不可少！
    camera.updateProjectionMatrix();
});

function render() {
    requestAnimationFrame( render );
    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;
    renderer.render( scene, camera );
}
render();
</script>

为什么这样能解决问题？ #

• 当窗口尺寸改变时，渲染器需要先调整画布大小，确保画面占满整个窗口
• 相机的aspect参数是宽/高，窗口变化后这个比例会改变，如果不更新，相机的投影会和实际窗口比例不匹配，导致画面拉伸或元素偏移
• camera.updateProjectionMatrix()会根据新的aspect重新计算相机的投影矩阵，让Three.js正确将3D场景投影到新尺寸的2D画布上，这样球体就会始终保持在屏幕中心啦

内容的提问来源于stack exchange，提问作者user15747606