examples/12_json_skeleton_animation.html

<!DOCTYPE html>
<html>

<head>

    <!-- using Bootstrap for styling -->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>

    <!-- ThreeJS r71 -->
    <script src="js/three.js"></script>

    <!-- ThreeJS r69
    <script src="js/three-69.js"></script>
    -->

    <!-- OrbitControls is used for scene navigation -->
    <script src="js/OrbitControls.js"></script>

    <!-- jQuery is needed for tutorials about user interaction -->
    <script src="js/jquery-2.1.4.min.js"></script>

    <!-- ColladaLoader is needed for external models loading -->
    <script src="js/ColladaLoader.js"></script>

    <!-- custom stylesheed -->
    <link rel="stylesheet" href="css/style.css"/>

</head>

<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h2 class="panel-title"><a href="http://3DWeb.cc">3DWeb</a> - WebGL Workshop - Example #12</h2>
    </div>
</div>
<div id="theContainer"></div>
</body>

<script type="text/javascript">

    /**
     * WebGL workshop scene template - www.3dweb.cc
     *
     * Instructions:
     * - you need a WebGL enabled browser (check it on http://get.webgl.org)
     * - if you load assets (textures, models...) you need also a local webserver (see tutorials)
     */

    // put the variables you want to access from the console here
    var container, renderer, scene, camera, materials = {}, clock = new THREE.Clock(), animations = [], currentAnimation,
            behaviour = function(time) { console.log(time) };

    (function () {

        // boilerplate
        container = document.getElementById('theContainer');

        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xaabbff);
        renderer.setSize(640, 480);

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(50, 640 / 480, 0.1, 8000);
        camera.position.set(0, 4, 10);
        //camera.lookAt(0, 2, 0);

        container.appendChild(renderer.domElement);

        // warmer light from upper right
        var theLight1 = new THREE.SpotLight(0xffdddd, 2);
        theLight1.position.set(10, 10, 20);
        scene.add(theLight1);

        // colder light from upper left
        var theLight2 = new THREE.SpotLight(0xddddff, 1.7);
        theLight2.position.set(10, 10, -20);
        scene.add(theLight2);

        //controls = new THREE.OrbitControls(camera, renderer.domElement);
        // write your code here

        var loader = new THREE.JSONLoader();
        loader.load('models/frankie-animation-minimal.json', function (model, modelMats) {

            $.each(modelMats, function(index, mat) {
                mat.skinning = true;
            });

            var facemat = new THREE.MeshFaceMaterial(modelMats);
            mesh = new THREE.SkinnedMesh(model, facemat);

            var animation;

            if (model.animations !== undefined) {
                for (var i = 0; i < model.animations.length; i += 1) {
                    animation = new THREE.Animation(mesh, model.animations[i]);
                    //console.log(i+' '+animation.data.name);
                    animations.push(animation);
                }
            }

            currentAnimation = animations[0];

            scene.add(mesh);

            setInterval(function() {
                //behaviour(currentAnimation.currentTime);
            }, 100);

        });

        $(container).on('mouseenter',function(event) {
            currentAnimation.play();
        });

        $(container).on('mouseout', function(event) {
            currentAnimation.stop();
        });

        function animate() {

            renderer.render(scene, camera);

            THREE.AnimationHandler.update(clock.getDelta()*0.5);

            requestAnimationFrame(animate);

        }

        animate();

    })();

</script>

</html>