javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
							<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - loaders - X-File loader</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
    <style>
        body {
            color: #ffffff;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            color: #fff;
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;
        }
        a {
            color: #ff0000
        }

        #info2 {
            color: #fff;
            background-color: #000;
            position: absolute;
            top: 3em;
            right : 0px;
            width: 10em;
            z-index: 200;
            display: block;
        }

        td {
            padding: 0.5em;
        }

    </style>
</head>
<body>
    <div id="info">
        <a href="http://threejs.org" target="_blank">three.js</a> - X-File Loader <br>
        <a href="https://github.com/adrs2002/threeXfileLoader" target="_new">see more info and samples</a> <br />
    </div>

    <div id="info2">
        <table>
            <tr>
                <td>mech 1</td>
                <td><select id="mech1_anime" onchange="mech1_changeAnime(this.value)">
                        <option value="stand">stand</option>
                        <option value="wark">wark</option>
                        <option value="attack">attack</option>
                      </select>
                    </td>
            </tr>
        </table>
    </div>

    <div id="canvase3d"></div>

	<script src='../build/three.js'></script>
	<script src='js/controls/OrbitControls.js'></script>

	<script src='js/loaders/XLoader.js'></script>

	<script src='js/Detector.js'></script>
	<script src='js/libs/stats.min.js'></script>
	<script src='js/libs/dat.gui.min.js'></script>

    <script>

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats, controls;
        var camera, scene, renderer;
        var clock = new THREE.Clock();
        var mixers = [];
        var manager = null;

        var skeletonHelper = null;
        var animates = [];
        var actions = [];
        var Models = [];

        init();

        var onProgress = function ( xhr ) {

            if ( xhr.lengthComputable ) {

                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

            }

        };

        var onError = function ( xhr ) {};

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            scene = new THREE.Scene();
            scene.add( new THREE.AmbientLight( 0xaaaaaa ) );

            // grid

            var gridHelper = new THREE.GridHelper( 14, 1, 0x303030, 0x303030 );
            scene.add( gridHelper );

            // stats

            stats = new Stats();
            container.appendChild( stats.dom );

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setClearColor( 0x666666 );
            container.appendChild( renderer.domElement );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.set( 2, 10, - 28 );
            camera.up.set( 0, 1, 0 );

            controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.target.set( 0, 5, 0 );
            controls.update();

            var light = new THREE.DirectionalLight( 0xffffff, 1 );
            light.position.set( 10, 100, - 10 ).normalize();
            scene.add( light );

            var light2 = new THREE.DirectionalLight( 0x777666, 1 );
            light2.position.set( - 1, - 1, - 1 ).normalize();
            scene.add( light2 );

            window.addEventListener( 'resize', onWindowResize, false );

            animate();

            // model loading

            manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {

                console.log( item, loaded, total );

            };

            var loader = new THREE.XLoader( manager );

            actions[ 0 ] = {};

            //download Model file

            loader.load( [ 'models/xfile/SSR06_model.x' ], function ( object ) {

                for ( var i = 0; i < object.models.length; i ++ ) {

                    var model = object.models[ i ];

                    model.scale.x *= - 1;

                    Models.push( model );

                }

                loadAnimation( 'stand', 0, () => {

                    scene.add( Models[ 0 ] );

                    if ( Models[ 0 ] instanceof THREE.SkinnedMesh ) {

                        skeletonHelper = new THREE.SkeletonHelper( Models[ 0 ] );
                        scene.add( skeletonHelper );

                    }

                    actions[ 0 ][ 'stand' ].play();

                } );

                object = null;

            }, onProgress, onError );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );

            var delta = clock.getDelta();

            if ( animates != null && animates.length > 0 ) {

                for ( var i = 0; i < animates.length; i ++ ) {

                    animates[ i ].update( delta * 1000  );

                }

            }

            stats.update();
            render();

        }

        function render() {

            renderer.render( scene, camera );

        }

        /////////////////////////////////////////////////////////////////////////////////
        function loadAnimation( animeName, modelId, _callback ) {

            if ( actions[ modelId ][ animeName ] ) {

                if ( _callback ) {

                    _callback();

                }

            } else {

                var loader2 = new THREE.XLoader( manager );
                loader2.load( [ 'models/xfile/' + animeName + '.x', { putPos: false, putScl: false } ], function () {

                    // !! important!
                    // associate divided model and animation.
                    loader2.assignAnimation( Models[ modelId ] );
                    if ( ! animates[ modelId ] ) {

                        animates[ modelId ] = Models[ modelId ].animationMixer;

                    }

                    actions[ modelId ][ animeName ] = Models[ modelId ].animationMixer.clipAction( animeName );

                    if ( animeName == 'stand' ) {

                        actions[ modelId ][ animeName ].setLoop( THREE.LoopOnce );

                    }

                    actions[ modelId ][ animeName ].clampWhenFinished = true;

                    if ( _callback ) {

                        _callback(); return;

                    }

                    actions[ modelId ][ animeName ].play();

                }, onProgress, onError );

            }

        }

        function mech1_changeAnime( val ) {

            loadAnimation( val, 0, function () {

                Object.keys( actions[ 0 ] ).forEach( function ( p ) {

                    if ( p == val ) {

                        actions[ 0 ][ p ].play();

                    } else {

                        actions[ 0 ][ p ].stop();

                    }

                } );

            } );

        }


    </script>

</body>

</html>