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

Question

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

Answer 1

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

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

在你的例子中，你将一堆对象放在世界的不同地方。您决定 5 个摄像机位置。您可以在位置之间进行调整/补间。

例如，想象这些字母中的每一个都是世界上的一组对象。 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 等之间进行 lerp。最简单的方法是使用大多数 3D 数学库都有的相当标准的 lookAt 函数。 lookAt 有 3 个参数。 眼睛，目标，向上。因此，对于每个相机，您都需要一个目标、眼睛、向上值。 Lerp/tween 2 个摄像机之间的这 3 个值，然后将它们输入 lookAt 以获得移动摄像机。

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