javascript 如何在three.js中使用反射?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11365236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use reflection in three.js?
提问by Applecow
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.
我想在带有 Three.js 的 WebGL 页面中有一个反射立方体表面。它应该类似于手机显示屏,可以反射一些光线,但它仍然必须是黑色的。
回答by Lee Stemkoski
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
http://stemkoski.github.com/Three.js/Reflection.html
with nicely formatted code at
带有格式良好的代码
https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Reflection.html
https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Reflection.html
(This is part of a collection of tutorial examples at http://stemkoski.github.com/Three.js/)
(这是http://stemkoski.github.com/Three.js/ 上的教程示例集合的一部分)
The main points are:
要点是:
- add to your scene a second camera (a CubeCamera) positioned at the object whose surface should be reflective
- create a material and set the environment map as the results of rendering from this second camera, e.g.
- 将第二个相机(CubeCamera)添加到您的场景中,该相机位于其表面应具有反射性的物体上
- 创建材质并将环境贴图设置为第二个相机的渲染结果,例如
for example:
例如:
var mirrorCubeMaterial = new THREE.MeshBasicMaterial(
{ envMap: mirrorCubeCamera.renderTarget } );
- in your render function, you have to render from all your cameras. Temporarily hide the object that is reflecting (so that it doesn't get in the way of the camera you are going to use), render from that camera, then unhide the reflective object.
- 在您的渲染功能中,您必须从所有相机进行渲染。暂时隐藏正在反射的对象(这样它就不会妨碍您将要使用的相机),从该相机进行渲染,然后取消隐藏反射对象。
for example:
例如:
mirrorCube.visible = false;
mirrorCubeCamera.updateCubeMap( renderer, scene );
mirrorCube.visible = true;
These code snippets are from the links I posted above; check them out!
这些代码片段来自我上面发布的链接;去看一下!