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官方文档-四元数