three设置相机面向模型

模型自身position属性 为（0，0，0），但并不在场景中心， 可能建模的原因，位置放到中心但设置了偏移（不一定）。

解决方法：

主要代码

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)

详见：three官方文档-四元数