Question

我在ThreeJS中创建金属外观时遇到了一些麻烦。我知道我需要使用MeshPhongMaterial素材类型，但我似乎无法正确设置它。

这是我到目前为止所做的，但它只会产生黑色表面。

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

任何了解MeshPhongMaterial的不同参数对于不熟悉3d图形领域的人实际意味着什么的任何见解都将不胜感激。

Answer 1

Phong Shading将基于在矢量图形的顶点（点）处插入法向矢量来创建阴影效果。然后每个角都有一个方向矢量，该矢量指向表面所面向的方向。这种方向的插值给出了表面平滑的假效果。即使它由四边形或三角形组成。

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

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

geometry.computeFaceNormals();

内置的Three.js几何图形（如THREE.CylinderGeometry）会自动在末尾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

所有文件都有

使用MeshLambertMaterial或MeshPhongMaterial影响对象。

metal将表面的颜色与镜面反射光相乘，这使得表面颜色更暗 - 例如，如果表面颜色分量为＆lt; 0.5,0.5,0.5＆gt;和镜面反射高光的颜色值<0.5,0.5,0.5＆gt;然后结果是＆lt; 0.25,0.25,0.25＆gt;创建更暗的高光组件。

如果设置为true，则着色器会将镜面反射高光倍增物体的底色，使其看起来更像金属而且颜色较深。如果设置为false，则会在顶部添加镜面反射高光基础颜色。

文档中的wraparound说

定义漫反射光照是否包裹在模型周围。此选项可在灯泡侧面添加更多（可着色）灯光与光有关的物体。

但这只是理论，如果你有兴趣了解它是如何工作的，你可以从Three.js源检查如何实现由WebGL提供给GPU的Fragment着色器：

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

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

金属表面有ThreeJS

1 个答案: