Three.js相机旋转与位置校正求助：无法实现理想视角

直接修改camera.rotation后调用camera.lookAt()会导致旋转被覆盖，因为lookAt()会自动计算相机的旋转矩阵以指向目标；同时camera.up的设置时机错误也会导致视角不符合预期。以下是修正后的代码和方案：

基础修正方案（不混用rotation和lookAt） #

const box = new THREE.Box3().setFromObject(model);
const size = box.getSize(new THREE.Vector3());
const center = box.getCenter(new THREE.Vector3());

// 调整相机裁剪范围，适配模型尺寸
camera.near = size.length() / 100;
camera.far = size.length() * 100;
camera.updateProjectionMatrix();

// 设置相机位置：基于模型中心偏移，可根据需求调整偏移比例
const offset = size.length() * 2; // 相机与模型的距离，越大视角越广
camera.position.set(
  center.x + offset,
  center.y + offset / 2,
  center.z + offset / 5
);

// 关键：先定义相机的"向上"方向，再调用lookAt
camera.up.set(0, 1, 0); // 默认Y轴向上，需Z轴向上则改为(0, 0, 1)
camera.lookAt(center);

灵活视角控制（推荐用OrbitControls） #

如果需要直观调整视角，使用OrbitControls可以避免手动计算旋转的麻烦：

// 先引入OrbitControls
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(center); // 控制目标设为模型中心
controls.enableDamping = true; // 添加平滑拖拽效果

// 动画循环中更新控制器
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

手动控制旋转（不使用lookAt） #

如果必须手动设置旋转，需通过方向向量计算四元数，避免与lookAt冲突：

const box = new THREE.Box3().setFromObject(model);
const size = box.getSize(new THREE.Vector3());
const center = box.getCenter(new THREE.Vector3());

camera.near = size.length() / 100;
camera.far = size.length() * 100;
camera.updateProjectionMatrix();

// 设置相机位置
camera.position.set(
  center.x + size.length() / 0.2,
  center.y + size.length() / 2,
  center.z + size.length() / 100
);

// 计算相机朝向模型中心的方向向量
const targetDir = center.clone().sub(camera.position).normalize();
// 设置相机朝向目标
camera.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, -1), targetDir);
// 额外添加旋转调整（比如绕Z轴转90度）
camera.rotation.z += Math.PI / 2;

内容的提问来源于stack exchange，提问作者Hay I'am Inces