three.js发光材质贴图 [英] three.js emissive material maps

问题描述

我目前正在Three.js中进行一些实验，我想使用一个发射贴图.我尝试过仅将纹理加载到phong材质的发光属性中，但是不幸的是，它不能那样工作.这是我的代码:

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?

推荐答案

您可以通过扩展现有Three.js材质(MeshPhong，MeshLambert等)的着色器来制作具有发光(发光)贴图支持的材质.

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

好处是您保留了标准three.js资料中的所有功能，还增加了发光贴图支持.

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

就本示例而言，我将使用three.js Phong着色器作为起点:

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

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

• 添加发光贴图制服:

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

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

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

有关更多详细信息，请看一下这个小提琴: http://jsfiddle.net/Qr7Bb/2/.

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

您会注意到我做了一个继承自THREE.ShaderMaterial的"MeshPhongGlowMaterial"类.那纯粹是可选的；您还可以使用上面的着色器和制服创建一个新的THREE.ShaderMaterial函数.

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.

标准的发射"属性会影响网格的整个表面，与发光贴图无关(而是使用自定义的"glowIntensity"属性).

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

这篇关于three.js发光材质贴图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！