webgl_morphtargets_horse.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - morph targets - horse</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <style>
  8. body {
  9. font-family: Monospace;
  10. background-color: #f0f0f0;
  11. margin: 0px;
  12. overflow: hidden;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../build/three.min.js"></script>
  18. <script src="js/libs/stats.min.js"></script>
  19. <script src="js/AnimationClipCreator.js"></script>
  20. <script>
  21. var container, stats;
  22. var camera, scene, projector, renderer;
  23. var mesh, mixer;
  24. init();
  25. animate();
  26. function init() {
  27. container = document.createElement( 'div' );
  28. document.body.appendChild( container );
  29. var info = document.createElement( 'div' );
  30. info.style.position = 'absolute';
  31. info.style.top = '10px';
  32. info.style.width = '100%';
  33. info.style.textAlign = 'center';
  34. info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - morph targets - horse. model by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a>';
  35. container.appendChild( info );
  36. //
  37. camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
  38. camera.position.y = 300;
  39. camera.target = new THREE.Vector3( 0, 150, 0 );
  40. scene = new THREE.Scene();
  41. //
  42. var light = new THREE.DirectionalLight( 0xefefff, 1.5 );
  43. light.position.set( 1, 1, 1 ).normalize();
  44. scene.add( light );
  45. var light = new THREE.DirectionalLight( 0xffefef, 1.5 );
  46. light.position.set( -1, -1, -1 ).normalize();
  47. scene.add( light );
  48. var loader = new THREE.JSONLoader();
  49. loader.load( "models/animated/horse.js", function( geometry ) {
  50. mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( {
  51. vertexColors: THREE.FaceColors,
  52. morphTargets: true
  53. } ) );
  54. mesh.scale.set( 1.5, 1.5, 1.5 );
  55. scene.add( mesh );
  56. mixer = new THREE.AnimationMixer( mesh );
  57. var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
  58. mixer.addAction( new THREE.AnimationAction( clip ).warpToDuration( 1 ) );
  59. } );
  60. //
  61. renderer = new THREE.WebGLRenderer();
  62. renderer.setClearColor( 0xf0f0f0 );
  63. renderer.setPixelRatio( window.devicePixelRatio );
  64. renderer.setSize( window.innerWidth, window.innerHeight );
  65. container.appendChild(renderer.domElement);
  66. //
  67. stats = new Stats();
  68. stats.domElement.style.position = 'absolute';
  69. stats.domElement.style.top = '0px';
  70. container.appendChild( stats.domElement );
  71. //
  72. window.addEventListener( 'resize', onWindowResize, false );
  73. }
  74. function onWindowResize() {
  75. camera.aspect = window.innerWidth / window.innerHeight;
  76. camera.updateProjectionMatrix();
  77. renderer.setSize( window.innerWidth, window.innerHeight );
  78. }
  79. //
  80. function animate() {
  81. requestAnimationFrame( animate );
  82. render();
  83. stats.update();
  84. }
  85. var radius = 600;
  86. var theta = 0;
  87. var prevTime = Date.now();
  88. function render() {
  89. theta += 0.1;
  90. camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
  91. camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
  92. camera.lookAt( camera.target );
  93. if ( mixer ) {
  94. var time = Date.now();
  95. mixer.update( ( time - prevTime ) * 0.001 );
  96. prevTime = time;
  97. }
  98. renderer.render( scene, camera );
  99. }
  100. </script>
  101. </body>
  102. </html>