三.js材质纹理和颜色 [英] Three.js material texture and color

问题描述

我尝试使用three.js为汽车模型制作材料，其中汽车的基色可以动态更改.通过更改我正在使用的 MeshPhongMaterial 的颜色属性，这很容易.然后我需要在顶部应用纹理，并认为通过将图像添加到材质的贴图属性就足够容易了.结果并不是我所期望的，地图/纹理图像也被颜色属性设置的颜色着色.我希望它基本上覆盖基色.

I trying to make a material for a car model with three.js where the base color of the car can be changed dynamically. This was easy enough by changing the color attribute of the MeshPhongMaterial that I am using. I then needed to apply a texture over the top and thought this would be easy enough by adding an image to the map attribute of the material. The outcome was not what I expected though, the map/texture image was also shaded the color set by the color attribute. I want it to basically overlay the base color.

谁能指出我正确的方向?

Can anyone point me in the right direction?

推荐答案

这是一个完整的脚本块.读完three.js后立即插入

Here is a complete script chunk. Insert immediately after reading three.js

<script>
THREE.ShaderChunk.map_fragment = [
    "#ifdef USE_MAP",
        "vec4 texelColor = texture2D( map, vUv ); /* NEWWW */",
        "#ifdef GAMMA_INPUT",
        "texelColor.xyz *= texelColor.xyz;",
        "#endif",
        "gl_FragColor.rgb = mix(gl_FragColor.rgb,texelColor.rgb,texelColor.a);",
        "vec3 surfDiffuse = mix(diffuse,vec3(1,1,1),texelColor.a);",
    "#else",
        "vec3 surfDiffuse = diffuse;",
    "#endif"].join('\n');
// now replace references to 'diffuse' with 'surfDiffuse'
THREE.ShaderChunk.lights_phong_fragment = 
    THREE.ShaderChunk.lights_phong_fragment.replace(/\bdiffuse\b/gm,'surfDiffuse')
THREE.ShaderLib.phong.fragmentShader = [
    "uniform vec3 diffuse;",
    "uniform float opacity;",
    "uniform vec3 ambient;",
    "uniform vec3 emissive;",
    "uniform vec3 specular;",
    "uniform float shininess;",
    THREE.ShaderChunk[ "color_pars_fragment" ],
    THREE.ShaderChunk[ "map_pars_fragment" ],
    THREE.ShaderChunk[ "lightmap_pars_fragment" ],
    THREE.ShaderChunk[ "envmap_pars_fragment" ],
    THREE.ShaderChunk[ "fog_pars_fragment" ],
    THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
    THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
    THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
    THREE.ShaderChunk[ "normalmap_pars_fragment" ],
    THREE.ShaderChunk[ "specularmap_pars_fragment" ],
    "void main() {",
        "gl_FragColor = vec4( vec3 ( 1.0 ), opacity );",
        THREE.ShaderChunk[ "map_fragment" ],
        THREE.ShaderChunk[ "alphatest_fragment" ],
        THREE.ShaderChunk[ "specularmap_fragment" ],
        THREE.ShaderChunk[ "lights_phong_fragment" ],
        THREE.ShaderChunk[ "lightmap_fragment" ],
        THREE.ShaderChunk[ "color_fragment" ],
        THREE.ShaderChunk[ "envmap_fragment" ],
        THREE.ShaderChunk[ "shadowmap_fragment" ],
        THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
        THREE.ShaderChunk[ "fog_fragment" ],
    "}"
].join('\n');
</script>

了解了一些three.js phong材料——它没有按照我想要的方式处理高光，但是……无论如何.如果您需要更复杂的功能，我建议您改用 ShaderMaterial.

learned a little bit about the three.js phong material -- it doesn't handle highlights the way I'd like, but... whatever. If you need more sophistication I'd suggest using ShaderMaterial instead.

这篇关于三.js材质纹理和颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！