Javascript png图像呈现为白色，而不是应有的颜色

我正在尝试使用.png纹理渲染.obj，但是当我放置.png纹理时，头部会变成白色，如图所示：

但是，当我删除png纹理时，它看起来是这样的：

这就是我用来创建纹理的方法：

    <script id="vertex_shader" type="x-shader/x-vertex">

    varying vec2 vUv;

    void main() {

    vUv = uv;

   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

   }

  </script>

  <script id="fragment_shader" type="x-shader/x-fragment">

   uniform vec3 color;
 uniform sampler2D texture;

   varying vec2 vUv;

 void main() {

 vec4 tColor = texture2D( texture, vUv );

gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );

}

将其应用于对象的步骤如下：

object.children[1].material = AvatarTextureF;

我尝试了几种方法，包括仅使用普通材料：

var AvatarTextureF = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png'), shininess: 80, color: 0xffcc66, shading: THREE.SmoothShading, alphaMap: 0x000000} );

同样的结果

这是更新后的代码，现在头部不可见

着色器：

    <script type="x-shader/x-vertex" id="vertex_shader">
   #if NUM_DIR_LIGHTS > 0
   struct DirectionalLight {
     vec3 direction;
   vec3 color;
  int shadow;
   float shadowBias;
  float shadowRadius;
  vec2 shadowMapSize;
  };
 uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
 #endif
 //varying vec3 color;
 void main() {
 float r = directionalLights[0].color.r;
 //color = vec3(r,0.6,0.6,0.6);
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0); }
 </script>


 <script type="x-shader/x-fragment" id="fragment_shader">
  uniform vec3 color;
 uniform sampler2D texture;

 varying vec2 vUv;
   void main() {
   vec4 tColor = texture2D( texture, vUv );
  gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );
   }
 </script>

---

您是否将透明PNG应用于面部外观

gl_FragColor=vec4（混合色，tColor.rgb，tColor.a），1.0tColor.a

为

0.0

，则代码>将以

color

值呈现

这意味着，它将被绘制为白色，您可以使用

颜色：{type:“c”，value:new THREE.color（0xffffff）}

，除了alpha为

1.0

的面部外观

将

color

值从

0xffffff

更改为所需的颜色

---

您的片段着色器中也缺少照明过程。

您是否将透明PNG应用于面部外观

gl_FragColor=vec4（混合色，tColor.rgb，tColor.a），1.0tColor.a

为

0.0

，则代码>将以

color

值呈现

这意味着，它将被绘制为白色，您可以使用

颜色：{type:“c”，value:new THREE.color（0xffffff）}

，除了alpha为

1.0

的面部外观

将

color

值从

0xffffff

更改为所需的颜色

---

另外，您的片段着色器中缺少照明过程。

那么，如何使其不需要支付任何颜色，而是保留原始渲染，并仅在其顶部应用透明png？能否共享整个代码和工作示例，如codepen或JSFIDLE？能否尝试更改颜色值，比如

0xffff00

在JSFIDLE的第102行的什么地方？然后，我猜那张脸会是黄色的。虽然由于缺乏资源，JSFIDLE无法工作，但正如2pha所说，添加照明非常复杂。也许这个问题有帮助，我添加了这个

var texture=THREE.ImageUtils.loadTexture（'./Avatar/FaceTestTr.png'）；texture.needsUpdate=true；//uniforms var uniforms=THREE.UniformsUtils.merge（[{color:{type:“c”，value:new THREE.color（0xff0000）}，纹理：{type:“t”，value:texture}，THREE.UniformsLib[“ambient”]，THREE.UniformsLib[“lights”]]）但是它现在呈现为黑色，不管我使用什么颜色。那么我如何使它不需要支付任何颜色，而是保持原始的渲染，并且只在它的顶部应用透明的png？你能分享整个代码和工作示例，如codepen或JSFIDLE吗？你能尝试更改颜色值吗，比如
0xffff00
在JSFIDLE的第102行的什么地方？然后，我猜那张脸会是黄色的。虽然由于缺乏资源，JSFIDLE无法工作，但正如2pha所说，添加照明非常复杂。也许这个问题有帮助，我添加了这个
var texture=THREE.ImageUtils.loadTexture（'./Avatar/FaceTestTr.png'）；texture.needsUpdate=true；//uniforms var uniforms=THREE.UniformsUtils.merge（[{color:{type:“c”，value:new THREE.color（0xff0000）}，纹理：{type:“t”，value:texture}，THREE.UniformsLib[“ambient”]，THREE.UniformsLib[“lights”]]）但是，无论我使用什么颜色，它现在都渲染为黑色。上面设置的着色器不考虑阴影、灯光或法线，因此将渲染为平面颜色（即纹理颜色或由纹理alpha确定的材质上的颜色集）上面设置姿势的着色器不考虑阴影、灯光或法线，因此将渲染为平面颜色（即纹理颜色或由纹理alpha确定的材质上的颜色集）
    <script type="x-shader/x-vertex" id="vertex_shader">
   #if NUM_DIR_LIGHTS > 0
   struct DirectionalLight {
     vec3 direction;
   vec3 color;
  int shadow;
   float shadowBias;
  float shadowRadius;
  vec2 shadowMapSize;
  };
 uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
 #endif
 //varying vec3 color;
 void main() {
 float r = directionalLights[0].color.r;
 //color = vec3(r,0.6,0.6,0.6);
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0); }
 </script>


 <script type="x-shader/x-fragment" id="fragment_shader">
  uniform vec3 color;
 uniform sampler2D texture;

 varying vec2 vUv;
   void main() {
   vec4 tColor = texture2D( texture, vUv );
  gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );
   }
 </script>

var texture = THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png'); 
                        texture.needsUpdate = true;

                        // uniforms

                        var uniforms = THREE.UniformsUtils.merge( [
                            THREE.UniformsLib[ "lights" ],
                            {
                                color: { type: "c", value: new THREE.Color( 0xffffff ) },
                                texture: { type: "t", value: texture }
                            }



                        ] );

                        // material
                        var AvatarTextureF = new THREE.ShaderMaterial({
                            uniforms        : uniforms,
                            vertexShader    : document.getElementById( 'vertex_shader' ).textContent,
                            fragmentShader  : document.getElementById( 'fragment_shader' ).textContent,
                            //transparent: true,
                            lights: true
                        });