In an attempt to showcase a skinned mesh avatar on Safari using WebGL (three.js r71), I have encountered some issues. Below is the code snippet for reference, with camera, lighting, scene, and renderer already set up:
loader = new THREE.JSONLoader();
loader.load( 'models/avatar.json', addModel );
guiControls = new function() {
// Various control options for different body parts
}
datGUI = new dat.GUI();
// Adding controls for scene, rotation, and scale
var helpset;
function addModel( geometry, materials ){
// Setting up material skinning
materials[0].skinning = true;
objeto= new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial(materials));
scene.add(objeto);
helpset = new THREE.SkeletonHelper(objeto);
}
}
// Custom render function
function render() {
// Updating bone rotations based on GUI controls
}
function animate(){
render();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
init();
animate();
Upon removing the line "materials[0].skinning = true;", the avatar successfully displays in the browser, but the bones remain static. Should I enable skinning to achieve bone rotation functionality?