Three.js [已解决]从Blender到THREEJS，使用GLTF导出具有UV纹理的网格&；材质颜色：材质颜色丢失

在我的游戏中，我使用Blender（2.79b）制作的网格（骨架、动画和没有纹理的材质），然后以glb格式导出（gltf binary v2）。在THREEJS场景中，我通过更改颜色来修改某些材质的颜色。我对THREEJS使用r109版本。gltf导出器版本为1.2.0

我想通过向材质添加UV纹理（如添加贴花）来改进我的网格

不幸的是，在THREEJS场景中，如果纹理渲染正常，则材质的颜色为黑色

为了更好地解释我的问题，我使用了默认的搅拌机立方体。我创建了：

• 紫外线图
• 具有不同颜色的每个面1种材质+1种UV纹理

要构建我的UV纹理，请执行以下操作：

• “智能紫外线项目”
• UV->导出UV布局（cube.png）

（将填充不透明度更改为0）

• 使用Gimp修改了cube.png
• 图像->打开图像（cube.png）

我允许使用Blender的默认选项

然后，我像往常一样使用GLTF导出器导出网格，并渲染到THREEJS场景中

var ambientLight =new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
ambientLight.position.set( 0,5, 0 );
scene.add( ambientLight );
var otherCube=new THREE.Mesh( new THREE.CubeGeometry(1,1,1),new THREE.MeshBasicMaterial({color: "blue"}) )
otherCube.position.x=-2
scene.add( otherCube);

 var GLTF_loader=new THREE.GLTFLoader();
 GLTF_loader.load( '/cube.glb', function(geometry)  {
   var mesh=geometry.scene.getObjectByName( "Cube" );
   scene.add(mesh);
 });

纹理渲染似乎正常，但每个面的颜色都会丢失。我制作了一个蓝色的立方体，以表明光线进入场景并没有问题

这看起来像是阿尔法问题，我在导出之前尝试激活Blender中的某些选项，但这并没有改变任何事情。另外，Blender中的渲染效果也很好

在Blender或/和THREEJS中使用哪些选项可以让我得到脸的颜色？（稍后更改颜色）

---

编辑：

最后，我通过使用自定义着色器材质解决了我的问题。现在，我有了材质颜色和纹理

<script id="robotVertexShader" type="x-shader/x-vertex">
        #define LAMBERT
        #define USE_MAP
        #define USE_UV
        uniform vec3 faceColor;
        varying vec3 vLightFront;
        varying vec3 vIndirectFront;
        #include <common>
        #include <uv_pars_vertex>
        #include <uv2_pars_vertex>
        #include <envmap_pars_vertex>
        #include <bsdfs>
        #include <lights_pars_begin>
        #include <color_pars_vertex>
        #include <fog_pars_vertex>
        #include <morphtarget_pars_vertex>
        #include <skinning_pars_vertex>
        #include <shadowmap_pars_vertex>
        #include <logdepthbuf_pars_vertex>
        #include <clipping_planes_pars_vertex>
        void main() {
            #include <uv_vertex>
            #include <uv2_vertex>
            #include <color_vertex>
            #include <beginnormal_vertex>
            #include <morphnormal_vertex>
            #include <skinbase_vertex>
            #include <skinnormal_vertex>
            #include <defaultnormal_vertex>
            #include <begin_vertex>
            #include <morphtarget_vertex>
            #include <skinning_vertex>
            #include <project_vertex>
            #include <logdepthbuf_vertex>
            #include <clipping_planes_vertex>
            #include <worldpos_vertex>
            #include <envmap_vertex>
            #include <lights_lambert_vertex>
            #include <shadowmap_vertex>
            #include <fog_vertex>
        }

    </script>

    <script id="robotFragmentShader" type="x-shader/x-fragment">
        #define USE_MAP
        #define USE_UV
        uniform vec3 faceColor;
        uniform vec3 diffuse;
        uniform vec3 emissive;
        uniform float opacity;
        varying vec3 vLightFront;
        varying vec3 vIndirectFront;

        #include <common>
        #include <packing>
        #include <dithering_pars_fragment>
        #include <color_pars_fragment>
        #include <uv_pars_fragment>
        #include <uv2_pars_fragment>
        #include <map_pars_fragment>
        #include <alphamap_pars_fragment>
        #include <aomap_pars_fragment>
        #include <lightmap_pars_fragment>
        #include <emissivemap_pars_fragment>
        #include <envmap_common_pars_fragment>
        #include <envmap_pars_fragment>
        #include <bsdfs>
        #include <lights_pars_begin>
        #include <fog_pars_fragment>
        #include <shadowmap_pars_fragment>
        #include <shadowmask_pars_fragment>
        #include <specularmap_pars_fragment>
        #include <logdepthbuf_pars_fragment>
        #include <clipping_planes_pars_fragment>
        void main() 
        {
            #include <clipping_planes_fragment>
            vec4 diffuseColor = vec4( diffuse, opacity );
            ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
            vec3 totalEmissiveRadiance = emissive;
            #include <logdepthbuf_fragment>

           // #include <map_fragment>
            vec4 texelColor = texture2D( map, vUv );
             texelColor.r = texelColor.r * texelColor.a + faceColor.r * ( 1.0 - texelColor.a);
                texelColor.g = texelColor.g * texelColor.a + faceColor.g * ( 1.0 - texelColor.a);
                texelColor.b = texelColor.b * texelColor.a + faceColor.b * ( 1.0 - texelColor.a);
            //texelColor = mapTexelToLinear( texelColor );
            diffuseColor *= texelColor;

            #include <color_fragment>
            #include <alphamap_fragment>
            #include <alphatest_fragment>
            #include <specularmap_fragment>
            #include <emissivemap_fragment>
            reflectedLight.indirectDiffuse = getAmbientLightIrradiance( ambientLightColor );
            reflectedLight.indirectDiffuse += vIndirectFront;
            #include <lightmap_fragment>
            reflectedLight.indirectDiffuse *= BRDF_Diffuse_Lambert( diffuseColor.rgb );
            reflectedLight.directDiffuse = vLightFront;
            reflectedLight.directDiffuse *= BRDF_Diffuse_Lambert( diffuseColor.rgb ) * getShadowMask();
            #include <aomap_fragment>
            vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;
            #include <envmap_fragment>
            gl_FragColor = vec4( outgoingLight, diffuseColor.a );
            #include <tonemapping_fragment>
            #include <encodings_fragment>
            #include <fog_fragment>
            #include <premultiplied_alpha_fragment>
            #include <dithering_fragment>
        }

    </script>

---

可以使用o.material.uniforms.faceColor.value=。

动态更改材质的颜色，我在想；那个物体看起来真的很暗，甚至连纹理都很暗。你在场景中添加灯光了吗？是的，我在场景中添加了半球形灯光。我添加了一个环境光，但它并没有改变任何东西。我看到你相应地编辑了你的答案。这方面的道具。你是对的，这是一个阿尔法问题。我做了一些测试，将半透明纹理映射到红色立方体上。无论我设置材质的颜色还是几何体面的顶点颜色，颜色都显示为黑色。也许@gman知道一个解决方案？（他似乎知道他的e.js）在这个例子中，一个简单的立方体，我将用js生成它们并使用shaderMaterial。或者把盒子叠起来。内一个带有FaceColor，外一个（稍微放大）带有贴花和透明功能。但我不知道这是否适合你的项目。我举了一个立方体的例子，但我的最终网格更复杂（500多个面）。我想有一个简单的解决办法，但我不知道足够的搅拌机，这是一个真正的天然气厂为我！也许再检查一下导出设置？搅拌机侧应该是好的。Gltf还支持基色和纹理。。我打赌它在3.js中。。对不起，我不能再帮你了。我确实找到了这个：。看起来很好。

mesh.traverse(function(o)        {
 if (o.material)            {
    var oldMat=o.material;

    o.material = new THREE.ShaderMaterial({
vertexShader:document.getElementById("robotVertexShader").textContent,
     fragmentShader: document.getElementById("robotFragmentShader").textContent,
     uniforms: THREE.UniformsUtils.merge([ THREE.ShaderLib.lambert.uniforms,{faceColor:{value: oldMat.color.clone()}}]),
                            lights: true,
                            name: 'custom-material'
                        });
    o.material.uniforms.map.value=oldMat.map;

  }
});