如果在THREE中使用「skinning = true」，Three.js動畫將停止。ShaderMaterial

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>