三.js 自发光 Material 贴图

Question

我目前正在对three.js 进行一些试验，我想使用自发光贴图。我曾尝试将纹理加载到 phong Material 的自发光属性中，但不幸的是，它并没有像那样工作。这是我的代码:

var params = {
    emissive: THREE.ImageUtils.loadTexture( emissive ),
    shininess: shininess,
    map: THREE.ImageUtils.loadTexture( map ),
    normalMap: THREE.ImageUtils.loadTexture( normalMap ),
    normalScale: new THREE.Vector2(0,-1),
    envMap: this.reflectionCube,
    combine: THREE.MixOperation,
    reflectivity: 0.05
};
var material = new THREE.MeshPhongMaterial(params);

任何人都可以指出我正确的方向以使自发光 map 工作吗？

Answer 1

您可以通过从现有的three.js Material (MeshPhong、MeshLambert 等)扩展着色器来制作具有自发光(发光)贴图支持的 Material 。

好处是您保留了标准three.js Material 中的所有功能，并添加了发光贴图支持。

出于本示例的目的，我将使用three.js Phong 着色器作为起点:

通过扩展(通过 UniformsLib/ShaderChunk)现有的 Phong 着色器来制作“PhongGlowShader”

添加发光贴图制服:

"glowMap" : { type: "t", value: null },
"glowIntensity": { type: "f", value: 1 },

将发光贴图因子添加到其片段着色器:

float glow = texture2D(glowMap, vUv).x * glowIntensity * 2.0; // optional * 2.0 and clamp
gl_FragColor.xyz = texelColor.xyz * clamp(emissive + totalDiffuse + ambientLightColor * ambient + glow, 0.0, 2.0) + totalSpecular;

使用该着色器创建一个新的 THREE.ShaderMaterial，并将发光纹理与其通常的制服一起传递

有关更多详细信息，请查看此 fiddle : http://jsfiddle.net/Qr7Bb/2/ .

您会注意到我创建了一个继承自 THREE.ShaderMaterial 的“MeshPhongGlowMaterial”类。这完全是可选的；您也可以使用一个函数来使用上述着色器和制服创建一个新的 THREE.ShaderMaterial。

标准的“emissive”属性影响网格的整个表面，它与发光贴图无关(而是使用自定义的“glowIntensity”属性)。