three.js .png图像渲染白色而不是它应该

I am trying to get a .obj to render with a .png texture, however when I put the .png texture, the head turns white as seen here:

我试图用.png纹理渲染一个.obj,但是当我放入.png纹理时,头部会变成白色,如下所示:

White headed avatar

白头的头像

However when I remove the png texture it looks like this:

但是,当我删除png纹理时,它看起来像这样:

This is what I am using to create the texture:

这是我用来创建纹理的:

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

}

var texture = THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png'); 
texture.needsUpdate = true;
var uniforms = {
    color: { type: "c", value: new THREE.Color( 0xffffff ) }, // material is "red"
    texture: { type: "t", value: texture },
    transparent: true,
    opacity: 0.9,
};

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

And this to apply it to the object:

这将它应用于对象:

object.children[1].material = AvatarTextureF;

I have tried a few ways, including just using a normal material:

我尝试过几种方法,包括使用普通材料:

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

With the same result.

结果相同。

Here is the updated code, now the head is just invisible..

这是更新的代码,现在头部只是看不见的..

Invisible head

Shaders:

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

And the head:

头部:

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

1 个解决方案

#1

Did you applied a transparent PNG with the face look?

你是否应用了具有脸部外观的透明PNG?

gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 ); will be rendered in color value, if tColor.a is 0.0.

gl_FragColor = vec4(mix(color,tColor.rgb,tColor.a),1.0);如果tColor.a为0.0,则将以颜色值呈现。

That means, it will be painted in white, which you set with color: { type: "c", value: new THREE.Color( 0xffffff ) }, except the face look where alpha is 1.0.

这意味着,它将被涂成白色,你用颜色设置:{type:“c”,value:new THREE.Color(0xffffff)},除了alpha为1.0的面部外观。

Change the color value from 0xffffff to color you want.

将颜色值从0xffffff更改为您想要的颜色。

Also you are missing lighting process in your fragment shader.

此外,您在片段着色器中缺少光照过程。

#1