javascript - ThreeJS 中带倒影的水

Question

The "ocean" example在 ThreeJS 中非常好，因为太阳反射在水面上，看起来很逼真。我正在尝试复制它，但仍有一部分代码我仍然需要理解。

海洋示例构造了一个 Water 对象和一个 Sky 对象。然后，它构造一个 CubeCamera 并将此相机的渲染目标用作场景的背景。到目前为止，很清楚。代码看起来像这样，(由我)隐藏了很多细节:

scene = new Scene();
water = new Water();
sky = new Sky();
scene.add( water );

cubeCamera = new CubeCamera();
scene.background = cubeCamera.renderTarget;

cubeCamera.update( renderer, sky );

除了最后一行，我什么都能看懂:cubeCamera.update(renderer, sky);

In the ThreeJS docs ，它说 CubeCamera.update() 的最后一个参数必须是场景，而不是天空。我完全不明白为什么这个示例有效，因为天空的方法与场景不同。

然而，这行代码似乎真的很重要，因为当我删除它时，太阳就再也没有了。

有人可以启发我并告诉我它为什么有效吗？

Answer 1

在 Three.js 中，一个 Scene只是 Object3D 的扩展。它的唯一区别在于它可以接受 .background 和 .fog 参数并相应地进行处理。

A Skybox对象未在 Three.js 核心中实现。它是一个示例特定实现，可以作为用户引用。如果您看一下实现，它只不过是一个带有 BoxGeometry 和自定义着色器 Material 的 Mesh。反过来，它也是一个 Object3D。

不管文档怎么说，您不需要在 cubeCamera 上渲染场景，就像您不需要在任何 three.js 项目上渲染场景一样。一切都可以用 Object3D 替换。 (您可能会遇到一些麻烦，但大多数情况下都是如此)

最终，这完全取决于您要达到的目的。在此示例中，cubeCamera 用于模拟天空盒，它独立于场景中的内容。

更多common use ，就是为场景中的物体创建环境贴图。在那种情况下，使用实际场景来创建 map 是有意义的。检查此示例背面的反射球体。