misc_animation_keys.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - animation - basic</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. color: #fff;
  10. font-family:Monospace;
  11. font-size:13px;
  12. text-align:center;
  13. background-color: #000;
  14. margin: 0px;
  15. overflow: hidden;
  16. }
  17. #info {
  18. position: absolute;
  19. top: 0px; width: 100%;
  20. padding: 5px;
  21. }
  22. a {
  23. color: #f00;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div id="container"></div>
  29. <div id="info">
  30. <a href="http://threejs.org" target="_blank">three.js</a> webgl - animation - basic use
  31. </div>
  32. <script src="../build/three.min.js"></script>
  33. <script src="js/Detector.js"></script>
  34. <script src="js/libs/stats.min.js"></script>
  35. <script>
  36. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  37. var container, stats;
  38. var scene, camera, renderer;
  39. var clock = new THREE.Clock();
  40. var init = function(){
  41. container = document.getElementById( 'container' );
  42. camera = new THREE.PerspectiveCamera( 53, window.innerWidth / window.innerHeight, 1, 1000 );
  43. camera.position.x = 0;
  44. camera.position.y = 0;
  45. camera.position.z = 100;
  46. camera.lookAt(new THREE.Vector3( 0, 0, 0 ));
  47. renderer = new THREE.CanvasRenderer( { antialias: false } );
  48. renderer.setSize( window.innerWidth, window.innerHeight );
  49. renderer.setClearColor( 0x555555, 1 );
  50. container.appendChild( renderer.domElement );
  51. stats = new Stats();
  52. stats.domElement.style.position = 'absolute';
  53. stats.domElement.style.top = '0px';
  54. container.appendChild( stats.domElement );
  55. window.addEventListener( 'resize', onWindowResize, false );
  56. };
  57. var onWindowResize = function () {
  58. windowHalfX = window.innerWidth / 2;
  59. windowHalfY = window.innerHeight / 2;
  60. camera.aspect = window.innerWidth / window.innerHeight;
  61. camera.updateProjectionMatrix();
  62. renderer.setSize( window.innerWidth, window.innerHeight );
  63. }
  64. var createScene = function(){
  65. scene = new THREE.Scene();
  66. var axisHelper = new THREE.AxisHelper( 1 );
  67. scene.add( axisHelper );
  68. // SphereGeometry
  69. var sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
  70. var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
  71. var sphereMesh = new THREE.Mesh( sphereGeometry, material );
  72. // Setup animation
  73. var animationData = {
  74. "name" : "Action",
  75. "fps" : 25,
  76. "length" : 2.0,
  77. "hierarchy" : [
  78. {
  79. "parent" : -1, //root
  80. "keys" : [
  81. {
  82. "time":0,
  83. "pos" :[0,0,0],
  84. "rot" :[0,0,0],
  85. "scl" :[1,1,1]
  86. },
  87. {
  88. "time":1.0,
  89. "pos" :[30,0,0]
  90. }
  91. ,
  92. {
  93. "time":2.0,
  94. "pos" :[0,0,0]
  95. }
  96. ]
  97. }
  98. ]
  99. };
  100. ensureLoop( animationData );
  101. var sphereMeshAnimation = new THREE.Animation( sphereMesh, animationData );
  102. sphereMeshAnimation.play();
  103. scene.add( sphereMesh );
  104. };
  105. var ensureLoop = function( animation ) {
  106. for ( var i = 0; i < animation.hierarchy.length; i ++ ) {
  107. var obj = animation.hierarchy[ i ];
  108. var first = obj.keys[ 0 ];
  109. var last = obj.keys[ obj.keys.length - 1 ];
  110. last.pos = first.pos;
  111. last.rot = first.rot;
  112. last.scl = first.scl;
  113. }
  114. };
  115. var animate = function () {
  116. requestAnimationFrame( animate );
  117. var delta = clock.getDelta();
  118. THREE.AnimationHandler.update( delta );
  119. render();
  120. };
  121. var render = function () {
  122. renderer.render( scene, camera );
  123. stats.update();
  124. };
  125. init();
  126. createScene();
  127. animate();
  128. </script>
  129. </body>
  130. </html>