如何在WebGL中的一个世界中创建多个场景？

Question

我想创建5个场景，使摄影机动画并在场景中自动移动。我想让相机在每个场景中动画20秒，并在20秒后移动到另一个场景，这样它就能在100秒内完成。我希望所有的场景都成为一个世界的一部分。所以，基本上我想创作一部电影。如何在WebGL中实现这一目标？我在网上找不到任何类似的代码段或教程。请注意，我需要一个纯粹基于WebGL的解决方案，而不是像three.js这样的任何其他库。

Answer 1

以下是使用three.js https://github.com/mrdoob/three.js/issues/1689

为相机设置动画的示例的讨论

Answer 2

听起来你基本上要求的是这样的东西

WebGL: Zooming to and stopping at object in a scene in WebGL

在你的情况下，你把一堆物品放在世界的不同地方。您决定5个摄像头位置。您在位置之间进行lerp / tween。

例如，想象一下这些字母中的每一个都是世界上的一组对象。 C1到C5的摄像头旨在让他们只看到来自他们的3个物体

D E F       G H I      J K L      M N O      P Q R

 \  /       \  /       \  /       \  /       \  /
  C1         C2         C3         C4         C5

你只需要在摄像机C1-> C2，C2-> C3，C3-> C4等之间进行镜像。最简单的方法是使用大多数3D数学库所具有的相当标准的lookAt函数。 lookAt有3个参数。 eye，target，up。因此，对于每个相机，您需要一个目标，眼睛，价值。 Lerp / tween在2个摄像机之间的这三个值然后将它们输入lookAt以获得移动的摄像机。

您的需求与上面链接的示例之间的唯一区别是上面的示例是动态计算摄像机位置。在您的情况下，您需要对相机位置进行硬编码。