three.js emissive material maps

问题

I'm currently experimenting a bit in three.js, and I'd like to use an emissive map. I've tried just loading a texture into the emissive property of a phong material, but it doesn't work like that, unfortunately. Here's my code:

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

Can anyone point me in the right direction to get the emissive map working?

回答1:

You can make a material with emissive (glow) map support by extending the shaders from existing three.js materials (MeshPhong, MeshLambert, etc).

The benefit is you retain all the functionality from the standard three.js material and also add glow map support.

For the purposes of this example, I'll use the three.js Phong shader as a starting point:

Make a "PhongGlowShader" by extending (via UniformsLib/ShaderChunk) the existing Phong shader

Add glow map uniforms:

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

Add a glow map factor to its fragment shader:

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;

Create a new THREE.ShaderMaterial using that shader, and pass the glow texture along with its usual uniforms

For further details, take a look at this fiddle: http://jsfiddle.net/Qr7Bb/2/.

You'll notice I made a "MeshPhongGlowMaterial" class that inherits from THREE.ShaderMaterial. That's purely optional; you can also just have a function that creates a new THREE.ShaderMaterial with the above shaders and uniforms.

The standard "emissive" property affects the entire surface of the mesh, it has nothing to do with the glow map (instead use the custom "glowIntensity" property for that).

来源：https://stackoverflow.com/questions/23717512/three-js-emissive-material-maps

标签

three.js

maps

material