three.js发光材料图

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"属性).