javascript - Three.js - Trying to use WebGL - Skinned Mesh Avatar -
i have been trying display avatar (skinned mesh) on safari using webgl (three.js r71). code below (i have set camera, lighting, scene , renderer):
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); } } // 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(); when delete materials[0].skinning = true; line have avatar displayed on browser, bones not move. have enable skinning in order rotate bones?
i have figured out. yes, have enable skinning in order rotate bones.
Comments
Post a Comment