8

我想在带有 Three.js 的 WebGL 页面中有一个反射立方体表面。它应该像一个手机显示屏,反射一些光,但它仍然必须是黑色的。

4

1 回答 1

24

我创建了一个带有详细注释的反射立方体(以及反射球)示例。现场版在

http://stemkoski.github.com/Three.js/Reflection.html

带有格式良好的代码

https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Reflection.html

(这是http://stemkoski.github.com/Three.js/上的教程示例集合的一部分)

要点是:

  • 在您的场景中添加第二个相机(CubeCamera),该相机位于表面应该是反射的物体上
  • 创建一个材质并将环境贴图设置为第二个摄像机的渲染结果,例如

例如:

 var mirrorCubeMaterial = new THREE.MeshBasicMaterial( 
    { envMap: mirrorCubeCamera.renderTarget } );
  • 在您的渲染功能中,您必须从所有相机进行渲染。暂时隐藏正在反射的对象(这样它就不会妨碍您要使用的相机),从该相机进行渲染,然后取消隐藏反射对象。

例如:

mirrorCube.visible = false;
mirrorCubeCamera.updateCubeMap( renderer, scene );
mirrorCube.visible = true;

这些代码片段来自我上面发布的链接;去看一下!

于 2012-07-06T17:22:42.287 回答