three.js .png Bild rendert weiß und nicht so wie es sein sollte

Question

Ich versuche eine .obj mit einer .png Textur zu rendern, aber wenn ich die .png Textur einfüge, wird der Kopf weiß wie hier zu sehen:

White headed avatar

Allerdings, wenn ich die png Textur entfernen sieht es wie folgt aus:

Dies ist, was ich die Textur erstellen bin mit:

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

Und das es auf das Objekt anzuwenden:

object.children[1].material = AvatarTextureF; 

Ich habe versucht, ein paar Möglichkeiten, darunter nur ein normales Material verwendet:

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

Mit dem gleichen Ergebnis. Hier

ist der aktualisierte Code, jetzt der Kopf gerade unsichtbar ist ..

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> 

Und der Kopf:

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

Answer 1

Haben Sie sich beworben eine transparente PNG mit dem Gesicht aussehen?

gl_FragColor = vec4(mix(color, tColor.rgb, tColor.a), 1.0); wird in color Wert gerendert, wenn tColor.a0.0 ist.

Das bedeutet, es wird in weiß, die Sie mit color: { type: "c", value: new THREE.Color(0xffffff) } festgelegt, mit Ausnahme der Gesicht aussehen, wo Alpha ist 1.0.

Ändern Sie den Wert color von 0xffffff in die gewünschte Farbe.

Auch Sie fehlen Beleuchtungsprozess in Ihrem Fragment-Shader.