javascript
/
three.js
spiegel van https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
							<!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 {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: -1;
            display: block;
        }

        #info a,
        .button {
            color: #f00;
            font-weight: bold;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div id='info'>
        <a href='http://threejs.org' target='_blank'>three.js</a> - X-File Loader test<br />
    </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 gui = new dat.GUI();
        var mixers = [];
        var manager = null;
        var Texloader = null;
        var ParentList = null;
        var skeletonHelper = null;
        var Models = [];
        var animateInf = null;
        var DashAnime = null;
        var d = new Date();
        var LastDateTime = null;
        var animates = [];
        var actions = [];
        init();

        function init() {

            LastDateTime = Date.now();
            container = document.createElement('div');
            document.body.appendChild(container);
            container.style.zIndex = -10;
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
            scene = new THREE.Scene();
            scene.add(new THREE.AmbientLight(0x999999));
            // grid
            var gridHelper = new THREE.GridHelper(14, 1, 0x303030, 0x303030);
            gridHelper.position.set(0, -0.04, 0);
            scene.add(gridHelper);
            // stats
            stats = new Stats();
            container.appendChild(stats.dom);
            // model
            manager = new THREE.LoadingManager();
            manager.onProgress = function (item, loaded, total) {

                console.log(item, loaded, total);

            };

            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) {

                console.log('Errror Loading!');

            };

            Texloader = new THREE.TextureLoader();
            var loader = new THREE.XLoader(manager, Texloader);

            // ! If [ Texture ] was reversed Y axis, enable the following. 
            // THREE.XLoader.IsUvYReverse = false;
            
		    // ! And if [ Model ] was reversed polygons, enable the following. 
            // loader.load([' your model url ', true ], function (object) {
            
            // read (download) model file
            loader.load(['models/xfile/SSR06_Born2.x', false], function (object) {

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

                    Models.push(object.FrameInfo[i]);
                    scene.add(Models[i]);

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

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

                        if (object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0) {

                            Models[i].geometry.animations = [];

                            /* 
                            *  ↓ that is BASIC animation data code.
                            *  Usually, please use this.
                            *  Because of the data I have, I use a different code
                            * 
                           for (var a = 0; a < object.XAnimationObj.length; a++) {
                               Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(object.XAnimationObj[a], Models[i].skeleton.bones));
                           } 
                           Models[i].mixer = new THREE.AnimationMixer(Models[i]);
                           animates.push(Models[i].mixer);

                           var action = Models[i].mixer.clipAction(Models[i].geometry.animations[0]);
                           action.play();
                           */

                            // ↓ that is a code for [ All animation-keyframes are connected data ]. output from 'LightWave3D' 
                            {

                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'stand', 10 * object.XAnimationObj[0].fps, 11 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'walk', 50 * object.XAnimationObj[0].fps, 80 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dash', 140 * object.XAnimationObj[0].fps, 160 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dashing', 160 * object.XAnimationObj[0].fps, 165 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'damage', 500 * object.XAnimationObj[0].fps, 530 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));

                                Models[i].mixer = new THREE.AnimationMixer(Models[i]);
                                animates.push(Models[i].mixer);

                                var stand = Models[i].mixer.clipAction('stand');
                                // stand.play();
                                stand.setLoop(THREE.LoopRepeat);
                                actions['stand'] = stand;

                                var walk = Models[i].mixer.clipAction('walk');
                                walk.setLoop(THREE.LoopRepeat);
                                walk.play();
                                actions['walk'] = walk;

                                var dash = Models[i].mixer.clipAction('dash');
                                dash.setLoop(THREE.LoopOnce);
                                //dash.play();
                                actions['dash'] = dash;

                                var dashing = Models[i].mixer.clipAction('dashing');
                                dashing.setLoop(THREE.LoopPingPong);
                                // dashing.play();
                                actions['dashing'] = dashing;

                                var damage = Models[i].mixer.clipAction('damage');
                                damage.setLoop(THREE.LoopRepeat);
                                //damage.play();
                                actions['damage'] = damage;

                                var ActionKeys = Object.keys(actions);
                                var dmy = {};
                                dmy.gui = '';
                                dmy.action = '';
                                gui.add(dmy, 'action', ActionKeys).onChange(function (v) {
                                    animates[0].stopAllAction();
                                    actions[v].play();
                                });

                            }
                            ///////////
                        }

                    }
                    
                }

                object = null;
            }, onProgress, onError);


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

            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.target.set(0, 12, 0);
            camera.position.set(2, 18, 28);
            camera.up.set(0, 1, 0);

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

            light = new THREE.DirectionalLight(0x555588);
            light.position.set(-1, -1, -1).normalize();
            scene.add(light);

            controls.update();
            window.addEventListener('resize', onWindowResize, false);
            animate();

        }

        function onWindowResize() {

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

        }
        //
        function animate() {

            requestAnimationFrame(animate);
            var nowTime = Date.now();
            var dulTime = nowTime - LastDateTime;
            LastDateTime = nowTime;

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

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

                    animates[i].update(dulTime);

                }

            }

            if (Models != null && Models.length > 0 && skeletonHelper != null) { skeletonHelper.update(); }

            stats.update();
            render();

        }

        function render() {
            
            renderer.render(scene, camera);

        }

        /////////////////
        /// this is not must mount codes.
        // split  One and Long Animation, for time
        function splitAnimation(_baseAnime, _name, _beginTime, _endTime) {

            var Animation = {};
            Animation.fps = _baseAnime.fps;
            Animation.name = _name;
            Animation.length = _endTime - _beginTime;
            Animation.hierarchy = [];

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

                var firstKey = -1;
                var lastKey = -1;
                var frame = {};
                frame.name = _baseAnime.hierarchy[i].name;
                frame.parent = _baseAnime.hierarchy[i].parent;
                frame.keys = [];

                for (var m = 1; m < _baseAnime.hierarchy[i].keys.length; m++) {

                    if (_baseAnime.hierarchy[i].keys[m].time > _beginTime) {

                        if (firstKey === -1) {

                            firstKey = m - 1;
                            frame.keys.push(_baseAnime.hierarchy[i].keys[m - 1]);
                            
                        }

                        frame.keys.push(_baseAnime.hierarchy[i].keys[m]);

                    }

                    if (_endTime <= _baseAnime.hierarchy[i].keys[m].time || m >= _baseAnime.hierarchy[i].keys.length - 1) {

                        break;
                    }

                }

                for (var m = 0; m < frame.keys.length; m++) {

                    frame.keys[m].time -= _beginTime;

                }

                Animation.hierarchy.push(frame);

            }

            return Animation;

        }
    </script>

</body>

</html>