THREE.js 中的反光材料答案

【问题标题】：Reflective material in THREE.jsTHREE.js 中的反光材料
【发布时间】：2013-11-12 22:21:50
【问题描述】：

如何创建反映场景中其他形状的材质？我尝试了reflectivity 属性，但它没有反映任何内容。

There is an example that seems to have this effect

这看起来不像是使用标准材料制作的。

【问题讨论】：

有很多很多这样的例子：threejs.org/examples/#webgl_materials_cars_camaro, threejs.org/examples/#webgl_materials_cubemap, threejs.org/examples/#webgl_materials_cubemap_balls_reflection
如果你想要一个镜像，也有一个例子：threejs.org/examples/#webgl_mirror
@WestLangley 除了镜子之外的所有示例都使用环境图像进行反射。如果您仔细查看材料，您会看到使用的图像。我特别询问了如何反射场景中的其他物体。镜像示例是很好的参考，谢谢。
见threejs.org/examples/#webgl_materials_cubemap_dynamic和threejs.org/examples/#webgl_materials_cubemap_dynamic2

标签： javascript three.js 3d

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

另外，玩弄设置；例如，为了减少反射效果，请尝试：

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

或

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

【讨论】：

感谢您的回答。我正在寻找地板物体的反光材料。反射率必须来自场景中的对象。我还没有看到任何预期效果的例子。像闪亮的塑料或金属。反射会有点扩散，不像镜子的例子。尽管镜像示例是我见过的最接近的示例。你能提供一些代码让我开始吗？
尝试更改具有反射的对象的材质参数，这将降低其反射并可能使其具有更多所需的效果。请参阅上面的更新答案。