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
Post a Comment