javascript - Three.js Mesh not animated with AnimationHandler -
i haven't been able blender exported mesh animate. not included buffalo 1 can see animated in example. (which i've been trying reproduce no avail. here's code, suspect it's simple missing thing, have no idea. doubt it's blender issue since haven't been able animate included meshes.
<!doctype html> <html lang="en"> <head> <title>three.js webgl - blender</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: monospace; background-color: #000000; margin: 0px; overflow: hidden; } #info { color: #fff; position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; } { color: red } #stats { position: absolute; top:0; left: 0 } #stats #fps { background: transparent !important } #stats #fps #fpstext { color: #aaa !important } #stats #fps #fpsgraph { display: none } </style> </head> <body> <div id="info"> <a href="http://crenet-games.com">025 valgany</a> </div> <script src="/js/three.min.js"></script> <script src="/js/detector.js"></script> <script src="/js/libs/stats.min.js"></script> <script> if ( ! detector.webgl ) detector.addgetwebglmessage(); var modelbb={"min":new three.vector3(),"max":new three.vector3() }; var crewon, animation; var container, stats; var camera, scene, renderer, objects; var particlelight, pointlight; var skin; var clock = new three.clock(); init(); function init() { container = document.createelement( 'div' ); document.body.appendchild( container ); camera = new three.perspectivecamera( 50, window.innerwidth / window.innerheight, 0.1, 10000 ); camera.position.set( 2, 4, 5 ); scene = new three.scene(); scene.fog = new three.fogexp2( 0x00ff00, 0.035 ); var loader = new three.jsonloader(true); loader.load("buffalo.js", function(geometry, materials) { geometry.computeboundingbox(); var facematerial = new three.meshfacematerial( materials ); facematerial.skinning = true; three.animationhandler.add( geometry.animation ); crewon = new three.skinnedmesh(geometry,facematerial, false); modelbb=geometry.boundingbox; crewon.position.set(0,0,0); scene.add(crewon); renderer.render(scene, camera); animation = new three.animation( crewon, geometry.animation.name ); animation.play( true, 0.5 ); }); // lights scene.add( new three.ambientlight( 0xcccccc ) ); pointlight = new three.pointlight( 0xffffff, 1, 30 ); pointlight.position.set( 5, 0, 0 ); scene.add( pointlight ); // renderer renderer = new three.webglrenderer(); renderer.setsize( window.innerwidth, window.innerheight ); container.appendchild( renderer.domelement ); // stats stats = new stats(); container.appendchild( stats.domelement ); // events window.addeventlistener( 'resize', onwindowresize, false ); animate(); } function onwindowresize( event ) { renderer.setsize( window.innerwidth, window.innerheight ); camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); } function animate() { requestanimationframe( animate, renderer.domelement ); var delta = clock.getdelta(); three.animationhandler.update( delta ); render(); stats.update(); } function render() { if ( crewon ){ crewon.rotation.y+=0.01; } if( typeof animation != 'undefined' && animation!=null){ animation.update(0.1); } if( typeof modelbb != 'undefined' && modelbb!=null){ camera.position.x = 0; camera.position.y = (modelbb.max.y-modelbb.min.y)/2; camera.position.z = (modelbb.max.z-modelbb.min.z)*2; camera.lookat( new three.vector3( 0, (modelbb.max.y-modelbb.min.y)/2, 0) ); } renderer.render( scene, camera ); } </script> </body> </html>
the problem may here:
var facematerial = new three.meshfacematerial( materials ); facematerial.skinning = true; the meshfacematerial container of other materials - isn't real material. try iterating on collection of materials:
var materials = facematerial.materials; (var = 0,length = materials.length; < length; i++) { var material = materials[i]; material.skinning = true; }
Comments
Post a Comment