三台摄像头三。

Question

在三分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

您需要更改您对相机的看法。

相机是您在画布上渲染的内容，因此无法通过在2个具有不同位置的摄像机之间切换来平稳过渡。

而不是具有rockcamera和treecamera。
您可以将其更改为空对象，rockObject和treebject。
并将其用作位置枢轴以插入主摄像头。

可以帮助您进行摄像机插值的一件事是使用Tween引擎，例如Tween.js。
这是一个示例 https://sbcode.net/threejs/thee/theen/

Answer 3

如果您想创建一个过渡，在某个时候（a）在某个时候渲染了树相机； （b）在以后的某个时候，摇滚摄像头被渲染； （c）在两者之间的某个时候，两个相机的位都呈现，然后您需要使用后处理。 three.js提供示例该示例使用两个不同的场景，但是将其修改以将一个场景与两个摄像机一起使用是微不足道的。