ThreeJS 的金属表面

Question

我在 ThreeJS 中创建金属外观的表面时遇到了一些问题。我知道我需要使用 MeshPhongMaterial material 类型，但我似乎无法正确设置它。

这是我目前所拥有的，但它只会产生黑色表面。

var material = new THREE.MeshPhongMaterial({ 
    color: 0xBCC6CC, 
    shininess: 30,
    metal: true,
    wrapAround: true,
    shading: THREE.FlatShading
});

如能深入了解 MeshPhongMaterial 的不同参数对不熟悉 3d 图形领域的人的实际意义，我们将不胜感激。

Answer 1

Phong 着色器将根据在矢量图形的顶点（点）处插入法向量来创建着色效果。每个角都有一个方向矢量，指向表面所面对的方向。这个方向的插值给出了表面的假效果 "smooth" 即使它由四边形或三角形组成。

https://en.wikipedia.org/wiki/Phong_shading

如果您手动构建几何体，那么您应该记住使用以下方法计算 Phone 阴影的面法线：

geometry.computeFaceNormals();

像 THREE.CylinderGeometry 这样的内置 Three.js 几何体会在末尾自动设置法线 of their constructor。检查他们如何构建几何图形很有用。

如果您手动构建网格，您也可以在面构造函数中给出法线

var face = new THREE.Face3( 0, 1, 2, normal, color, 0 );

normal可以是面的法线或顶点法线数组，并且可以指示 Phong 着色器使用这些顶点法线 THREE.SmoothShading 而不是 THREE.FlatShading -后者将只使用面部法线。

shininess 定义从点光源反射的光量 - 如果增加该值，镜面反射部分会变得更锐利，零表示没有镜面反射分量。反射模型解释在这里：

https://en.wikipedia.org/wiki/Phong_reflection_model

因为金属感来自产生镜面反射错觉的点光源，所以你必须在靠近表面的地方添加一些：

http://threejs.org/docs/#Reference/Lights/PointLight http://threejs.org/docs/#Reference/Lights/SpotLight http://threejs.org/docs/#Reference/Lights/DirectionalLight

文档中都有

Affects objects using MeshLambertMaterial or MeshPhongMaterial.

metal 会将表面的颜色与镜面光相乘，这会使表面颜色更暗一些 - 例如，如果表面颜色分量为 <0.5,0.5,0.5> 和镜面highlight 的颜色值 <0.5,0.5,0.5> 然后结果是 <0.25, 0.25, 0.25> 创建较暗的高亮组件。

If set to true the shader multiplies the specular highlight by the underlying color of the object, making it appear to be more metal-like and darker. If set to false the specular highlight is added ontop of the underlying colors.

文档中的 wraparound 说

Define whether the diffuse lighting wraps around the model or not. This option adds a little more (tintable) light onto the side of the object in relation to a light.

但这只是理论，如果您有兴趣了解它的实际工作原理，您可以从 Three.js 源码中查看由 WebGL 提供给 GPU 的片段着色器是如何实现的：

https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderChunk/lights_phong_fragment.glsl

真正的东西在那里，你可以看到即使文档只提到影响 MeshPhongMaterial 的 PointLight、SpotLight 和 DirectionalLight，漫反射和环境光也会影响表面的闪电和颜色 -就像他们应该的那样。

ThreeJS 的金属表面

Metallic Surface with ThreeJS

javascript

3d

three.js