Threejs 3D模型居中

在Three.js中，要将3D模型居中，你需要计算模型的边界框，然后将模型的中心与场景的中心对齐。以下是实现这一目标的代码示例：

import * as THREE from 'three';
 
// 假设你已经有了一个加载好的3D模型，并且添加到了场景中
// 模型对象: model
 
// 创建一个用于计算边界的助手对象
const box = new THREE.Box3().setFromObject(model);
 
// 计算边界中心点
const center = new THREE.Vector3();
box.getCenter(center);
 
// 计算模型的尺寸
const size = new THREE.Vector3();
box.getSize(size);
 
// 将模型的中心移动到场景的中心
// 假设你的场景宽高比为1:1，且已经有了一个camera和renderer对象
model.position.x -= center.x;
model.position.y -= center.y;
model.position.z -= center.z;
 
// 如果场景的宽高比不是1:1，你可能还需要调整模型的位置以保持居中
// 计算宽和高的最大值，并除以2得到中心点
const maxDim = Math.max(size.x, size.y, size.z);
const halfDim = maxDim / 2;
 
// 根据宽高比调整模型位置
if (camera.aspect > 1) {
    model.position.x -= halfDim;
} else {
    model.position.y -= halfDim;
}
 
// 更新camera的lookAt，确保模型居中
camera.lookAt(model.position);
 
// 更新渲染器的场景和camera
renderer.render(scene, camera);

这段代码首先计算了3D模型的边界框，然后计算了模型的中心点并将其移动到了原点。接着根据场景的宽高比调整模型的位置，使其在场景中居中。最后更新了camera的lookAt，以确保模型始终处于可视状态。