Javascript 三面倒影的水

Javascript 三面倒影的水,javascript,three.js,Javascript,Three.js,3J真的很不错,因为太阳反射在水面上,看起来很逼真。我试图复制这一点,但代码中有一部分我仍然需要理解 海洋示例构造了一个水对象和一个天空对象。然后,它构造一个立方体并使用该摄影机的渲染目标作为场景的背景。到目前为止,一切都很清楚。代码如下所示,许多细节被(我)抑制: 除了最后一行,我什么都懂:cubeCamera.update(renderer,sky) ,它表示CubeCamera.update()的最后一个参数必须是场景,而不是天空。我无法理解为什么这个示例可以工作,因为天空与场景有不同的方

3J真的很不错,因为太阳反射在水面上,看起来很逼真。我试图复制这一点,但代码中有一部分我仍然需要理解

海洋示例构造了一个水对象和一个天空对象。然后,它构造一个立方体并使用该摄影机的渲染目标作为场景的背景。到目前为止,一切都很清楚。代码如下所示,许多细节被(我)抑制:

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

,它表示CubeCamera.update()的最后一个参数必须是场景,而不是天空。我无法理解为什么这个示例可以工作,因为天空与场景有不同的方法

然而,代码行似乎非常重要,因为当我删除它时,就再也没有太阳了

有人能告诉我为什么它能工作吗?

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

Three.js core中未实现对象。它是一个特定于示例的实现,可供用户参考。如果您看一下实现,它只不过是一个带有
BoxGeometry
和自定义着色器材质的
Mesh
。反过来,它也是一个
Object3D

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

最后,这完全取决于你想要达到的目的。在本例中,
cubeCamera
用于模拟与场景中的内容无关的skybox


更重要的是为场景中的对象创建环境贴图。在该场景中,使用实际场景创建地图是有意义的。检查本例后面的反射球体。

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

深入研究代码,你可以看到和。进一步

因此,如果深入研究代码,您会发现可以将
Object3D
传递给
CubeCamera.update
,它只调用
renderer.renderer(场景、摄影机)
并且恰好不依赖于
场景的任何
特定事物
而只需要
场景的
Object3D
部分

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

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

cubeCamera.update( renderer, sky );