如何在 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 个摄像头之间的这 3 个值然后将它们输入 lookAt 以获得移动的摄像头。

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

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

How can I create multiple scenes in one world in WebGL?

javascript

webgl

scene