Advertisement
Guest User

ThreeJS Skeleton Animation from Blender

a guest
Dec 17th, 2017
225
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.05 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Skeleton Animation Export</title>
  6.         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui">
  7.         <style>
  8.             html, body, canvas {
  9.                 display:block; width:100%; height:100%;
  10.                 margin:0; padding:0; outline:none; border:none;
  11.                 touch-action:none; -ms-touch-action:none; touch-action-delay:none;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body ontouchstart="">
  16.    
  17.         <canvas id="my_canvas"></canvas>
  18.        
  19.         <script src="three.min.js" type="text/javascript"></script>
  20.        
  21.         <script type="text/javascript">
  22. var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById( "my_canvas" ) });
  23. renderer.setPixelRatio(window.devicePixelRatio);
  24. renderer.setClearColor('#e7f7e7');
  25. renderer.setSize(window.innerWidth, window.innerHeight);
  26.  
  27. var scene = new THREE.Scene();
  28.  
  29. var camera = new THREE.PerspectiveCamera(15, 1, 1, 100);
  30. camera.aspect = window.innerWidth / window.innerHeight;
  31. camera.updateProjectionMatrix();
  32. camera.position.z = 45;
  33. camera.position.y = 3;
  34. scene.add(camera);
  35.  
  36. var ambient = new THREE.AmbientLight(0xffffff, 0.5);
  37. scene.add(ambient);
  38.  
  39. var directional = new THREE.DirectionalLight(0xffffff, 0.25);
  40. directional.position.set(-1, 1, 1);
  41. scene.add(directional);
  42.  
  43. var cylinder;
  44.  
  45. var loader = new THREE.ObjectLoader();
  46. loader.load("models.json",
  47.     function (object) {
  48.         cylinder = object.getObjectByName("Cylinder");
  49.         scene.add(cylinder);
  50.        
  51.         cylinder.mixer = new THREE.AnimationMixer(cylinder);
  52.         idleAction = cylinder.mixer.clipAction( cylinder.geometry.animations[0] );
  53.         idleAction.play();
  54.        
  55.         var helper = new THREE.SkeletonHelper(cylinder);
  56.         helper.material.linewidth = 3;
  57.         scene.add( helper );
  58.     }
  59. );
  60.  
  61. function onframe(time) {
  62.     if ( cylinder ){
  63.         cylinder.mixer.update(0.01);
  64.         //cylinder.position.x = Math.sin(time * 0.0005) * 6;
  65.     }
  66.     renderer.render(scene, camera);
  67.     window.requestAnimationFrame(onframe);
  68. };
  69. window.requestAnimationFrame(onframe);
  70.         </script>
  71.        
  72.     </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement