The JSON model was crafted in Blender and the animation was developed within Blender using bones. However, upon attempting to play the animation in three.js, everything in the scene renders except for the fish. Despite my efforts to find a solution, I have yet to come across anything that resolves this issue. I am currently following along with the book 'Learning three.js' by Jos Dirksen. As a beginner in three.js, I am determined to troubleshoot this problem.
var loader = new THREE.JSONLoader();
var mesh;
loader.load('fish_anim1.json', function (model, mat) {
mat[0] = new THREE.MeshLambertMaterial({color: 0x9ABF15, skinning: true});
mesh = new THREE.SkinnedMesh(model, mat[0]);
animation = new THREE.Animation(model, model.animations);
mesh.position.set(0, 5, 0);
mesh.scale.x = 3;
mesh.scale.y = 3;
mesh.scale.z = 4;
mesh.rotation.y = Math.PI;
mesh.name = 'fish'+fish_count;
scene.add(mesh);
animation.play();
});
Within the render loop, I include this line to ensure the animation updates:
THREE.AnimationHandler.update(delta);