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

【问题标题】：How can I create multiple scenes in one world in WebGL?如何在 WebGL 中在一个世界中创建多个场景？
【发布时间】：2025-11-23 04:55:02
【问题描述】：

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

【问题讨论】：

标签： javascript webgl scene

【解决方案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/tween 2 个摄像头之间的这 3 个值，然后将它们输入 lookAt 以获取您的移动摄像头。

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

【讨论】：

是的，我需要这样的东西。谢谢。

【解决方案2】：

这里讨论了使用three.js https://github.com/mrdoob/three.js/issues/1689为相机设置动画的示例

【讨论】：

是的，这个使用了three.js，但我需要一个使用纯WebGL的解决方案。没有任何其他库。