Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Skeleton Animation Export</title>
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui">
- <style>
- html, body, canvas {
- display:block; width:100%; height:100%;
- margin:0; padding:0; outline:none; border:none;
- touch-action:none; -ms-touch-action:none; touch-action-delay:none;
- }
- </style>
- </head>
- <body ontouchstart="">
- <canvas id="my_canvas"></canvas>
- <script src="three.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById( "my_canvas" ) });
- renderer.setPixelRatio(window.devicePixelRatio);
- renderer.setClearColor('#e7f7e7');
- renderer.setSize(window.innerWidth, window.innerHeight);
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(15, 1, 1, 100);
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- camera.position.z = 45;
- camera.position.y = 3;
- scene.add(camera);
- var ambient = new THREE.AmbientLight(0xffffff, 0.5);
- scene.add(ambient);
- var directional = new THREE.DirectionalLight(0xffffff, 0.25);
- directional.position.set(-1, 1, 1);
- scene.add(directional);
- var cylinder;
- var loader = new THREE.ObjectLoader();
- loader.load("models.json",
- function (object) {
- cylinder = object.getObjectByName("Cylinder");
- scene.add(cylinder);
- cylinder.mixer = new THREE.AnimationMixer(cylinder);
- idleAction = cylinder.mixer.clipAction( cylinder.geometry.animations[0] );
- idleAction.play();
- var helper = new THREE.SkeletonHelper(cylinder);
- helper.material.linewidth = 3;
- scene.add( helper );
- }
- );
- function onframe(time) {
- if ( cylinder ){
- cylinder.mixer.update(0.01);
- //cylinder.position.x = Math.sin(time * 0.0005) * 6;
- }
- renderer.render(scene, camera);
- window.requestAnimationFrame(onframe);
- };
- window.requestAnimationFrame(onframe);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement