three设置相机面向模型

解决方法：

主要代码

let box = new THREE.Box3();
// target 是目标模型
box.setFromObject(target);
let center = new THREE.Vector3();
box.getCenter(center)
// 相机放到模型附近   模型中心位置向量加上 德尔塔向量
camera.position.copy(center).add(delta)

delta计算

let delta = new THREE.Vector3();
// 设置初始向量
delta.set(0, 0, 1);
// 应用四元数
delta.applyQuaternion(camera.quaternion);
// 德尔塔向量乘以一个标量
delta.multiplyScalar(distance * 4);

distance计算

let sphere = new THREE.Sphere();
// box.getBoundingSphere(target) 获取到包围这个box的球
let distance = box.getBoundingSphere(sphere).radius;

完整代码

let box = new THREE.Box3();
// target 是目标模型
box.setFromObject(target);
let center = new THREE.Vector3();
box.getCenter(center)
// 计算 distance
let sphere = new THREE.Sphere();
// box.getBoundingSphere(target) 获取到包围这个box的球
let distance = box.getBoundingSphere(sphere).radius;
// 计算 delta
let delta = new THREE.Vector3();
// 设置初始向量
delta.set(0, 0, 1);
// 应用四元数
delta.applyQuaternion(camera.quaternion);
// 德尔塔向量乘以一个标量
delta.multiplyScalar(distance * 4);
// 相机放到模型附近   模型中心位置向量加上 德尔塔向量
camera.position.copy(center).add(delta)

扩展

1.四元数
在three.js中使用四元数来表示旋转
const quaternion = new THREE.Quaternion()
quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0), Math.PI/2)
const vector = new THREE.Vector3(1,0,0)
vector.applyQuaternion(quaternion)