我该如何在three.js中使用反射？

Question

我希望在使用Three.js制作的WebGL页面中添加一个反射立方体表面。它应该类似于手机屏幕，能够反射一些光线，但仍然是黑色的。

- Applecow

Answer 1

我创建了一个反射立方体（以及一个反射球）的示例，并添加了详细的注释。您可以在以下网址查看实时版本：

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;

这些代码片段来自我上面发布的链接，请查看！

- Stemkoski

---

如何为自定义的3D对象.obj实现反射和折射？ - Nikolay Podolnyy