animation - Can I replace the avatar used in the three.js example morphtargets_human with my own avatar? -


i trying use three.js example morphtargets_human , replace avatar used own avatar. studied files used in example , cannot see why cannot replace it. created avatar morph targets (1 morph target + default) , skeleton. exported morph targets morph animation , skeleton skeletal animation (it seems morph targets , skeletal animation required work). when open javascript file on browser, can see dat gui controls, avatar not displayed. how can make work?

additional files: umich_ucs.js, ucscharacter.js, ucs_config.json, detector.js, dat.gui.min.js, three.min.js, orbitcontrols.js

jsfiddle: link

        var screen_width = window.innerwidth;         var screen_height = window.innerheight;          var container;          var camera, scene;         var renderer;          var mesh;          var mousex = 0, mousey = 0;          var windowhalfx = window.innerwidth / 2;         var windowhalfy = window.innerheight / 2;          var clock = new three.clock();          var gui, skinconfig, morphconfig;          document.addeventlistener( 'mousemove', ondocumentmousemove, false );          init();         animate();          function init() {              container = document.getelementbyid( 'container' );              camera = new three.perspectivecamera( 60, window.innerwidth / window.innerheight, 1, 100000 );             camera.position.set( 2000, 5000, 5000 );              scene = new three.scene();              // lights              var light = new three.directionallight( 0xffffff, 1 );             light.position.set( 0, 140, 500 );             light.position.multiplyscalar( 1.1 );             light.color.sethsl( 0.6, 0.075, 1 );             scene.add( light );              //              var light = new three.directionallight( 0xffffff, 1 );             light.position.set( 0, -1, 0 );             scene.add( light );              // renderer              renderer = new three.webglrenderer( { antialias: true } );             renderer.setclearcolor( 0xffffff );             renderer.setpixelratio( window.devicepixelratio );             renderer.setsize( screen_width, screen_height );             container.appendchild( renderer.domelement );              // character              character = new three.ucscharacter();             character.onloadcomplete = function() {                 console.log( "load complete" );                 console.log( character.numskins + " skins , " + character.nummorphs + " morphtargets loaded." );                 gui = new dat.gui();                 setupskinsgui();                 setupmorphsgui();                 gui.width = 300;                 gui.open();             }              var loader = new three.xhrloader();             loader.load("http://threejs.org/examples/models/skinned/ucs_config.json", function ( text ) {                  var config = json.parse( text );                 character.loadparts( config );                 scene.add( character.root );              } );              window.addeventlistener( 'resize', onwindowresize, false );              controls = new three.orbitcontrols( camera, renderer.domelement );             controls.center.set( 0, 3000, 0);              controls.addeventlistener( 'change', render );          }          function setupskinsgui() {              var skingui = gui.addfolder( "skins" );              skinconfig = {                 wireframe: false             };              var skincallback = function( index ) {                 return function () {                     character.setskin( index );                 };             }              ( var = 0; < character.numskins; i++ ) {                 var name = character.skins[ ].name;                 skinconfig[ name ] = skincallback( );             }              ( var = 0; < character.numskins; i++ ) {                 skingui.add( skinconfig, character.skins[i].name );             }              skingui.open();          }          function setupmorphsgui() {              var morphgui = gui.addfolder( "morphs" );              morphconfig = {             };              var morphcallback = function( index ) {                 return function () {                     character.updatemorphs( morphconfig );                 }             }              ( var = 0; < character.nummorphs; ++ ) {                 var morphname = character.morphs[ ];                 morphconfig[ morphname ] = 0;             }              ( var = 0; < character.nummorphs; ++ ) {                 morphgui.add( morphconfig, character.morphs[ ] ).min( 0 ).max( 100 ).onchange( morphcallback( ) );             }              morphgui.open();          }          function onwindowresize() {              windowhalfx = window.innerwidth / 2;             windowhalfy = window.innerheight / 2;              camera.aspect = window.innerwidth / window.innerheight;             camera.updateprojectionmatrix();              renderer.setsize( window.innerwidth, window.innerheight );          }          function ondocumentmousemove( event ) {              mousex = ( event.clientx - windowhalfx ) * 10;             mousey = ( event.clienty - windowhalfy ) * 10;          }          //          function animate() {              requestanimationframe( animate );              controls.update();              render();          }          function render() {              var delta = 0.75 * clock.getdelta();              // update skinning              three.animationhandler.update( delta );              renderer.render( scene, camera );          } 

i have figured out. problem scaling. avatar big, not see displayed on browser.


Comments

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

html - Missing border-right in select on Firefox -

c# - two queries in same method -