三.js 创建镜像 VS。钢材对材料的影响？答案

【问题标题】：Three.js creating a mirror VS. steel effect on material?三.js 创建镜像 VS。钢材对材料的影响？
【发布时间】：2021-10-15 06:27:03
【问题描述】：

在three.js 中，我对metalness 和roughness 有点困惑。 metalness 和/或 roughness 在镜子和金属/钢示例中有何不同，我将如何制作它们？

例如，如何制作镜子，像这样：

还有一种金属材料，像这样：

【问题讨论】：

一个真正的“完美”镜子需要的不仅仅是简单的材料才能准确地反映场景......
哈哈，没关系！我不是那个意思。任何答案将不胜感激:)
您是否阅读过MeshStandardMaterial 上的文档页面？在那里，您会找到两个文章链接，这些文章解释了基于物理的渲染背后的概念。第一个：Basic Theory of Physically-Based Rendering，第二个：Physically-Based Rendering, And You Can Too!。他们非常擅长描述金属度和粗糙度背后的物理原理。
谢谢，我去看看。
这适用于金属/钢外观，但是镜子呢？能否也写一些代码来说明如何创建它？

标签： javascript three.js webgl lighting mirror

【解决方案1】：

如果您曾经使用过 PhotoShop 或 GIMP，您可能还记得使用过高斯模糊工具。这正是粗糙度的工作原理。如果将粗糙度设置为 1，环境贴图将变得模糊。如果将其设置为 0，则根本不会有任何模糊。

另一方面，金属度是物体应该反射多少环境。将此设置为 1，将环境强度设置为 100%，因此您将获得清晰的图像。将此视为放置在对象上的环境不透明。如果将其设置为 0，您可能会发现自己很麻烦，因为对象 - 没有纹理（在你的情况下，那是镜子 - 反射部分没有纹理集。它可能附加了置换贴图或 UV 纹理提供更多细节）将是黑色的。这是有道理的，因为您没有放置任何纹理。

以下是来自 three.js 的优秀示例：
https://threejs.org/examples/webgl_materials_envmaps.html https://threejs.org/examples/webgl_materials_envmaps_hdr.html

【讨论】：

哇，这正是我想要的！我用过 GIMP，现在我可以完美地关联了。非常感谢！