Question

我正在尝试使用.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 );

}

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

然后将其应用于对象：

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

结果相同。

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

Invisible head

着色器：

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

Answer 1

您是否应用了具有脸部外观的透明PNG？

如果gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );为color，

tColor.a将以0.0值呈现。

这意味着，它将以白色绘制，您使用color: { type: "c", value: new THREE.Color( 0xffffff ) }进行设置，但脸部外观为alpha 1.0。

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

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

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

1 个答案: