Question

我目前正在试验一下three.js，我想使用一个自发光地图。我试过将纹理加载到phong材质的自发光属性中，但不幸的是它不能像那样工作。这是我的代码：

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);

有人能指出我正确的方向让发射地图有效吗？

Answer 1

您可以通过从现有的three.js材质（MeshPhong，MeshLambert等）扩展着色器来制作具有自发光（辉光）贴图支持的材质。

好处是您可以保留标准three.js材料的所有功能，还可以添加辉光贴图支持。

出于本示例的目的，我将使用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，并将辉光纹理与其通常的制服一起传递

有关详细信息，请查看此小提琴：http://jsfiddle.net/Qr7Bb/2/。

你会注意到我创建了一个继承自THREE.ShaderMaterial的“MeshPhongGlowMaterial”类。这纯粹是可选的;你也可以使用一个函数创建一个带有上述着色器和制服的新THREE.ShaderMaterial。

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

three.js发光材料图

1 个答案: