Three.js中有多个摄像头

Question

在Three.js中，如何从一台相机切换到另一台相机，最好是平滑过渡/过渡？

让我们假设我们的场景有两个对象，一块石头和一棵树。对于每个物体，都有一个专门的相机来观察它。我希望能够在这两个相机之间平稳过渡。

PS：为了避免混淆，我的设置有两个摄像头，但只有一个视口。

示例：

// Rock camera
const rockCamera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 1000);
rockCamera.rotation.x = THREE.MathUtils.degToRad(-50);
rockCamera.position.set(2, 13, 8,);
scene.add(rockCamera);
// Tree camera
const treeCamera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 1000);
treeCamera.rotation.x = THREE.MathUtils.degToRad(25);
treeCamera.position.set(7, 5, 12,);
scene.add(treeCamera);

Answer 1

使用一个相机，随时间在开始位置/旋转和位置/旋转之间插值。例如：

const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 1000);
camera.rotation.x = THREE.MathUtils.degToRad(-50);
camera.position.set(2, 13, 8,);
let pos0 = new THREE.Vector3(2, 13, 8);
let rot0 = new THREE.Vector3(THREE.MathUtils.degToRad(-50), 0, 0);
let pos1 = new THREE.Vector3(7, 5, 12);
let rot1 = new THREE.Vector3(THREE.MathUtils.degToRad(25), 0, 0);

w是范围为[0.0，1.0]的浮点值。随着时间的推移更改该值并在每帧中更改相机：

let pos = new THREE.Vector3().lerpVectors(pos0, pos1, w);
let rot = new THREE.Vector3().lerpVectors(rot0, rot1, w);
camera.position.set(pos.x, pos.y, pos.z);
camera.rotation.set(rot.x, rot.y, rot.z);

Answer 2

你需要稍微改变一下你对相机的看法。

摄影机是在画布上渲染的，因此无法通过在具有不同位置的两个摄影机之间切换来平滑过渡。

而不是具有CCD_ 2和CCD_。您可以将其更改为空对象rockObject和treeObject。并将其用作位置枢轴来插值主相机。

有一件事可以帮助你进行相机插值，那就是使用tween.js这样的tween引擎。
这里有一个例子https://sbcode.net/threejs/tween/

Answer 3

如果您希望创建一个过渡，其中(a(在某个时间，树摄影机被渲染；(b( 在稍后的某个时间，岩石摄影机被渲染；和(c(在这两者之间的某个时间，两个相机的比特都被渲染，然后你会想要使用后处理。Three.js提供了一个此类转换的例子；该示例使用了两个不同的场景，但将其修改为使用一个带有两个摄影机的场景是微不足道的。