Я пытался отобразить аватар (сетку со скинами) в Safari с помощью WebGL (three.js r71). Код ниже (я уже настроил камеру, освещение, сцену и рендерер):
loader = new THREE.JSONLoader();
loader.load( 'models/avatar.json', addModel );
guiControls = new function() {
this.mPelvis = 0.0;
this.mTorso = 0.0;
this.mChest = 0.0;
this.mNeck = 0.0;
this.mHead = 0.0;
this.mSkull = 0.0;
this.mEyeRight = 0.0;
this.mEyeLeft = 0.0;
this.mCollarLeft = 0.0;
this.mShoulderLeft = 0.0;
this.mElbowLeft = 0.0;
this.mWristLeft = 0.0;
this.mCollarRight = 0.0;
this.mShoulderRight = 0.0;
this.mElbowRight = 0.0;
this.mWristRight = 0.0;
this.mHipRight = 0.0;
this.mKneeRight = 0.0;
this.mAnkleRight = 0.0;
this.mFootRight = 0.0;
this.mToeRight = 0.0;
this.mHipLeft = 0.0;
this.mKneeLeft = 0.0;
this.mAnkleLeft = 0.0;
this.mFootLeft = 0.0;
this.mToeLeft = 0.0;
this.rotationX = 0.001;
this.rotationY = 0.001;
this.rotationZ = 0.001;
this.scaleX = 3;
this.scaleY = 3;
this.scaleZ = 3;
this.scene = function(){
console.log(scene);
};
}
datGUI = new dat.GUI();
datGUI.add(guiControls, "scene");
var cfolder = datGUI.addFolder('Controls');
cfolder.add(guiControls, 'mPelvis',-1.57, 1.57);
cfolder.add(guiControls, 'mTorso',-1.57, 1.57);
cfolder.add(guiControls, 'mChest',-1.57, 1.57);
cfolder.add(guiControls, 'mNeck',-1.57, 1.57);
cfolder.add(guiControls, 'mHead',-1.57, 1.57);
cfolder.add(guiControls, 'mSkull',-1.57, 1.57);
cfolder.add(guiControls, 'mEyeRight',-1.57, 1.57);
cfolder.add(guiControls, 'mEyeLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mCollarLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mShoulderLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mElbowLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mWristLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mCollarRight',-1.57, 1.57);
cfolder.add(guiControls, 'mShoulderRight',-1.57, 1.57);
cfolder.add(guiControls, 'mElbowRight',-1.57, 1.57);
cfolder.add(guiControls, 'mWristRight',-1.57, 1.57);
cfolder.add(guiControls, 'mHipRight',-1.57, 1.57);
cfolder.add(guiControls, 'mKneeRight',-1.57, 1.57);
cfolder.add(guiControls, 'mAnkleRight',-1.57, 1.57);
cfolder.add(guiControls, 'mFootRight',-1.57, 1.57);
cfolder.add(guiControls, 'mToeRight',-1.57, 1.57);
cfolder.add(guiControls, 'mHipLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mKneeLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mAnkleLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mFootLeft',-1.57, 1.57);
cfolder.add(guiControls, 'mToeLeft',-1.57, 1.57);
var rfolder = datGUI.addFolder('Rotation');
rfolder.add(guiControls, 'rotationX', -1 ,1);
rfolder.add(guiControls, 'rotationY', -1 ,1);
rfolder.add(guiControls, 'rotationZ', -1 ,1);
var sfolder = datGUI.addFolder('Scale');
sfolder.add(guiControls, 'scaleX', 0 , 1);
sfolder.add(guiControls, 'scaleY', 0 , 1);
sfolder.add(guiControls, 'scaleZ', 0 , 1);
datGUI.close();
var helpset;
function addModel( geometry, materials ){
materials[0].skinning = true;
objeto= new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial(materials));
scene.add(objeto);
helpset = new THREE.SkeletonHelper(objeto);
// scene.add(helpset);
}
}
// Your render function
function render() {
scene.traverse(function(child) {
if (child instanceof THREE.SkinnedMesh){
child.rotation.y += .01;
child.scale.x = guiControls.scaleX;
child.scale.y = guiControls.scaleY;
child.scale.z = guiControls.scaleZ;
child.rotation.x = guiControls.rotationX;
child.rotation.y = guiControls.rotationY;
child.rotation.z = guiControls.rotationZ;
child.skeleton.bones[0].rotation.z = guiControls.mPelvis;
child.skeleton.bones[1].rotation.z = guiControls.mTorso;
child.skeleton.bones[2].rotation.z = guiControls.mChest;
child.skeleton.bones[3].rotation.z = guiControls.mNeck;
child.skeleton.bones[4].rotation.z = guiControls.mHead;
child.skeleton.bones[5].rotation.z = guiControls.mSkull;
child.skeleton.bones[6].rotation.z = guiControls.mEyeRight;
child.skeleton.bones[7].rotation.z = guiControls.mEyeLeft;
child.skeleton.bones[8].rotation.z = guiControls.mCollarLeft;
child.skeleton.bones[9].rotation.z = guiControls.mShoulderLeft;
child.skeleton.bones[10].rotation.z = guiControls.mElbowLeft;
child.skeleton.bones[11].rotation.z = guiControls.mWristLeft;
child.skeleton.bones[12].rotation.z = guiControls.mCollarRight;
child.skeleton.bones[13].rotation.z = guiControls.mShoulderRight;
child.skeleton.bones[14].rotation.z = guiControls.mElbowRight;
child.skeleton.bones[15].rotation.z = guiControls.mWristRight;
child.skeleton.bones[16].rotation.z = guiControls.mHipRight;
child.skeleton.bones[17].rotation.z = guiControls.mKneeRight;
child.skeleton.bones[18].rotation.z = guiControls.mAnkleRight;
child.skeleton.bones[19].rotation.z = guiControls.mFootRight;
child.skeleton.bones[20].rotation.z = guiControls.mToeRight;
child.skeleton.bones[21].rotation.z = guiControls.mHipLeft;
child.skeleton.bones[22].rotation.z = guiControls.mKneeLeft;
child.skeleton.bones[23].rotation.y = guiControls.mAnkleLeft;
child.skeleton.bones[24].rotation.y = guiControls.mFootLeft;
child.skeleton.bones[25].rotation.y = guiControls.mToeLeft;
}
else if (child instanceof THREE.SkeletonHelper){
child.update();
}
});
}
function animate(){
render();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
init();
animate();
Когда я удаляю материалы[0].skinning = true; line У меня аватарка отображается в браузере, но кости не двигаются. Нужно ли включать скиннинг, чтобы вращать кости?
