如何在three.js中使用反射? [英] How can I use reflection in three.js?

问题描述

我想在带有 Three.js 的 WebGL 页面中有一个反射立方体表面.它应该类似于手机显示屏，可以反射一些光线，但它仍然必须是黑色的.

I want to have a reflecting cube surface in a WebGL page with Three.js. It should resemble a mobile phone display, which reflects some light, but it still has to be black.

推荐答案

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

I have created an example of a reflecting cube (and also a reflective sphere) with detailed comments. The live version is at

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/上的教程示例集合的一部分三.js/)

要点是:

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

例如:

 var mirrorCubeMaterial = new THREE.MeshBasicMaterial( 
    { envMap: mirrorCubeCamera.renderTarget } );

• 在您的渲染功能中，您必须从所有相机进行渲染.暂时隐藏正在反射的对象(这样它就不会妨碍您将要使用的相机)，从该相机进行渲染，然后取消隐藏反射对象.

例如:

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

这些代码片段来自我上面发布的链接；看看他们！

These code snippets are from the links I posted above; check them out!

这篇关于如何在three.js中使用反射?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！