javascript THREE.js 中的反光材料

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19731471/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 16:38:23  来源:igfitidea点击:

Reflective material in THREE.js

javascript3dthree.jswebgl

提问by MCSharp

How can I create a material that reflects other shapes from the scene? I have tried the reflectivityproperty but it didn't reflect anything.

如何创建反映场景中其他形状的材质?我已经尝试过该reflectivity属性,但它没有反映任何内容。

There is an example that seems to have this effect: http://threejs.org/examples/#webgl_shading_physical

有一个例子似乎有这种效果:http: //threejs.org/examples/#webgl_shading_physical

It doesn't look like standard materials were used to create this.

它看起来不像是使用标准材料来创建的。

采纳答案by Lee Stemkoski

To go into a bit of the theory: a reflection is basically an image of the scene taken from a certain position. So if you want a planar mesh to serve as a mirror, you'll have to add a camera at that position, have it render the scene to a texture in the animation loop, and then use that texture in the material for the planar mesh. I would also recommend looking at http://stemkoski.github.io/Three.js/Reflection.htmlin addition to the examples WestLangley mentioned.

深入一点理论:反射基本上是从某个位置拍摄的场景图像。因此,如果您希望平面网格用作镜子,则必须在该位置添加一个相机,让它在动画循环中将场景渲染为纹理,然后在平面网格的材质中使用该纹理. 除了 WestLangley 提到的示例之外,我还建议您查看http://stemkoski.github.io/Three.js/Reflection.html

Also, play around with settings; for a less reflective effect, for example, try:

此外,玩弄设置;例如,为了减少反射效果,请尝试:

var mirrorMaterial = new THREE.MeshBasicMaterial( { color: 0x111111, envMap: mirrorCamera.renderTarget } );

or

或者

var mirrorMaterial = new THREE.MeshPhongMaterial( { emissive: 0x111111, envMap: mirrorCamera.renderTarget } );

回答by Hoxz

https://threejs.org/examples/#webgl_materials_cubemap
I did it with the above example:

https://threejs.org/examples/#webgl_materials_cubemap
我用上面的例子做到了:

new THREE.MeshLambertMaterial ({
    map: texture,    
    envMap: scene.background,      
    combine: THREE.MixOperation,     
    reflectivity: .5     
})

The key variable, as i understand, is THREE.MixOperation

据我了解,关键变量是 THREE.MixOperation