Currently, I am developing a game using WebGL and three.js, and I am in need of a skin shader for my character models. However, I have encountered a problem where if I use THREE.ShaderMaterial, the animation stops. Can anyone provide assistance or guidance on this issue?
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;
};`
After creating the material, I will then proceed to load the character model and apply the material to it
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();};
};