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（）的最后一个参数必须是一个场景，而不是天空。我无法理解为什么此示例完全有效，因为Sky与Scene的方法不同。

但是，代码行似乎非常重要，因为当我删除它时，再也没有太阳了。

请问有人能启发我并告诉我它为什么起作用吗？

Answer 1

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

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

尽管文档中有说明，您也不需要在cubeCamera上渲染场景，就像在任何three.js项目中都不需要场景一样。一切都可以用Object3D代替。 （您可能会遇到一些麻烦，但这在大多数情况下都是正确的）

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

更common use是为场景中的对象创建环境图。在那种情况下，使用实际场景创建地图是有意义的。检查此示例后面的反射球。

Answer 2

首先，JavaScript非常动态。在许多情况下，具有正确属性和方法的任何对象都可以传递给期望具有这些功能和方法的对象的函数。

深入研究代码，您可以看到Sky is based on Mesh和Mesh is based on Object3D。进一步Scene is based on Object3D

因此，如果您深入研究代码，会发现可以将Object3D传递给CubeCamera.update，后者仅调用renderer.renderer(scene, camera)而碰巧不依赖任何Scene Scene的特定内容，但实际上只需要Object3D的{{1}}部分

在ThreeJS中思考水

2 个答案: