如何在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等之间穿插。最简单的方法是使用大多数3D数学库所具有的相当标准的lookAt函数。lookAt采用3个参数。eye，target，up。因此，对于每一个相机，你需要一个目标，眼睛，向上的价值。Lerp/ to之间的这3个值之间的两个相机，然后把他们送进lookAt，以得到你的移动相机。

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

Answer 2

下面是用three.js https://github.com/mrdoob/three.js/issues/1689制作相机动画的例子