Javascript 如果使用“Three.js”，动画将停止；蒙皮=真”；有三个。ShaderMaterial

我正在使用three.js编写一个使用WebGL的游戏，我需要为我的角色模型使用皮肤着色器。但如果我使用3.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();};
   }; 

---

这段代码应该可以让任何人使用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>

可变vec2 vUv；
均匀mat4矩阵；
统一的mat4-bindMatrixInverse；
均匀mat4骨计量学[MAX_BONES]；
mat4 getBoneMatrix（浮点数i中的常数）{
mat4骨=骨计量学[int（i）]；
回骨；
}
void main（）{
vUv=紫外线；
mat4 boneMatX=getBoneMatrix（skinIndex.x）；
mat4 boneMatY=getBoneMatrix（skinIndex.y）；
mat4 boneMatZ=getBoneMatrix（skinIndex.z）；
mat4-boneMatW=getBoneMatrix（skinIndex.w）；
mat4皮肤基质=mat4（0.0）；
skinMatrix+=皮肤重量x*boneMatX；
skinMatrix+=皮肤重量y*骨量；
skinMatrix+=皮肤重量.z*boneMatZ；
skinMatrix+=皮肤重量，w*boneMatW；
skinMatrix=bindMatrixInverse*skinMatrix*bindMatrix；
vec4 Skindnormal=skinMatrix*vec4（正常，0.0）；
vec3 objectNormal=skindnormal.xyz；
vec3 transformedNormal=normalMatrix*objectNormal；
vec4 skinVertex=bindMatrix*vec4（位置，1.0）；
vec4剥皮=vec4（0.0）；
skinned+=boneMatX*skinVertex*皮肤重量.x；
skinned+=骨量*皮肤顶点*皮肤重量.y；
skinned+=boneMatZ*skinVertex*skinWeight.z；
skinned+=骨骼宽度*皮肤顶点*皮肤重量.w；
剥皮=bindMatrixInverse*剥皮；
vec4 mvPosition=模型视图矩阵*蒙皮；
gl_位置=投影矩阵*mvPosition；
}
可变vec2 vUv；
void main（）{
gl_FragColor=vec4（1，vUv.x，0，1.0）；
}
材质=新的三个着色器材质（{
vertexShader:document.querySelector（'.vs'）.textContent，
fragmentShader:document.querySelector（'.fs'）.textContent，
剥皮：真的
});

有谁能帮助我实现自定义着色器材质的“蒙皮”技术吗？这个问题已经在github上得到了回答。