Question

我使用three.js使用WebGL编写游戏，我需要为我的角色模型设置皮肤着色器。但如果我使用THREE.ShaderMaterial动画停止。有人可以帮忙吗？

SkinShaderSimple = function (mapColor, mapHeight, mapSpecular, composer)
{
if (mapColor === undefined)    return new THREE.MeshPhongMaterial();
if (mapHeight === undefined)   return new THREE.MeshPhongMaterial();
if (mapSpecular === undefined) return new THREE.MeshPhongMaterial();
if (composer === undefined)    return new THREE.MeshPhongMaterial();

var shader = THREE.ShaderSkin[ "skinSimple" ];
var fragmentShader = shader.fragmentShader;
var vertexShader = shader.vertexShader;

var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "enableBump" ].value = true;
uniforms[ "enableSpecular" ].value = true;
uniforms[ "tBeckmann" ].value = composer.renderTarget1;
uniforms[ "tDiffuse" ].value = mapColor;

uniforms[ "bumpMap" ].value = mapHeight;
uniforms[ "specularMap" ].value = mapSpecular;

uniforms[ "diffuse" ].value.setHex( 0xa0a0a0 );
uniforms[ "specular" ].value.setHex( 0xa0a0a0 );

uniforms[ "uRoughness" ].value = 0.145;
uniforms[ "uSpecularBrightness" ].value = 0.75;

uniforms[ "bumpScale" ].value = 16;

uniforms[ "offsetRepeat" ].value.set( 0.001, 0.001, 0.998, 0.998 );


 var mat = new THREE.ShaderMaterial( { fragmentShader: fragmentShader,vertexShader: vertexShader, uniforms: uniforms, lights: true, skinning : true} );

 return mat;
};`

然后我正在加载角色并使用这种材料

     loadMainChar = function()
     {
         //tmp loader
          var loader = new THREE.JSONLoader();     

          //loader with callback function
          loader.load( "content/models/character/Goblin.13.js", 
          function ( geometry, materials ) 
          {                  

               // Tell the material that it has bone weights
               var mtl = MaterialsLibrary.CharacterSkinShaderSimple; 
               mtl.skinning = true;


               // Create a new SkinnedMesh (important! Not a animatedMesh!)
              mainCharacter = new THREE.SkinnedMesh( geometry, mtl );
              mainCharacter.position.set(0,0,0); 
              mainCharacter.scale.set(1,1,1);

               // Instantiate the animation

               mainCharAnimation=new THREE.Animation(mainCharacter, geometry.animation);
               mainCharacter.castShadow    = true;
               mainCharacter.receiveShadow = true;

               // Start playing the animation
               mainCharAnimation.play();

               //add char to scene
               scene.add(mainCharacter);
          }          
         ); 

       loader.onLoadComplete = function () {CheckLoadingMeshes();};
   };

Answer 1

这段代码应该让任何人都使用THREE.WebGLRenderer 82。

<script type="x-shader/x-vertex" class="vs">

    varying vec2 vUv;
    uniform mat4 bindMatrix;
    uniform mat4 bindMatrixInverse;
    uniform mat4 boneMatrices[ MAX_BONES ];

    mat4 getBoneMatrix( const in float i ) {
        mat4 bone = boneMatrices[ int(i) ];
        return bone;
    }

    void main() {
        vUv = uv;
        mat4 boneMatX = getBoneMatrix( skinIndex.x );
        mat4 boneMatY = getBoneMatrix( skinIndex.y );
        mat4 boneMatZ = getBoneMatrix( skinIndex.z );
        mat4 boneMatW = getBoneMatrix( skinIndex.w );
        mat4 skinMatrix = mat4( 0.0 );
        skinMatrix += skinWeight.x * boneMatX;
        skinMatrix += skinWeight.y * boneMatY;
        skinMatrix += skinWeight.z * boneMatZ;
        skinMatrix += skinWeight.w * boneMatW;
        skinMatrix  = bindMatrixInverse * skinMatrix * bindMatrix;
        vec4 skinnedNormal = skinMatrix * vec4( normal, 0.0 );
        vec3 objectNormal = skinnedNormal.xyz;
        vec3 transformedNormal = normalMatrix * objectNormal;
        vec4 skinVertex = bindMatrix * vec4( position, 1.0 );
        vec4 skinned = vec4( 0.0 );
        skinned += boneMatX * skinVertex * skinWeight.x;
        skinned += boneMatY * skinVertex * skinWeight.y;
        skinned += boneMatZ * skinVertex * skinWeight.z;
        skinned += boneMatW * skinVertex * skinWeight.w;
        skinned  = bindMatrixInverse * skinned;
        vec4 mvPosition = modelViewMatrix * skinned;
        gl_Position = projectionMatrix * mvPosition;
    }

</script>
<script type="x-shader/x-fragment" class="fs">

    varying vec2 vUv;

    void main() {
        gl_FragColor = vec4(1, vUv.x, 0, 1.0);
    }

</script>
<script>
    material = new THREE.ShaderMaterial( {
        vertexShader: document.querySelector( '.vs' ).textContent,
        fragmentShader: document.querySelector( '.fs' ).textContent,
        skinning:true
    });
</script>

如果在THREE.ShaderMaterial中使用“skinning = true”，则会停止Three.js动画

1 个答案: