javascript
/
three.js
дзеркало https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!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
		}
	</style>
</head>
<body>
	<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - X-File Loader</div>
	<div id="container"></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 stats;
		var camera, scene, renderer;
		var clock = new THREE.Clock();
		var gui = new dat.GUI();
		var mixers = [];
		var models = [];
		var animates = [];
		var actions = [];

		init();

		function init() {

			var container = document.getElementById( 'container' );
			document.body.appendChild( container );

			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
			camera.position.set( 2, 20, 30 );

			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0x666666 );

			// grid

			var gridHelper = new THREE.GridHelper( 20, 20 );
			scene.add( gridHelper );

			// stats

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

			// model

			var loader = new THREE.XLoader();

			// 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 ] );
					var model = models[ i ];

					scene.add( model );

					if ( model instanceof THREE.SkinnedMesh ) {

						var skeletonHelper = new THREE.SkeletonHelper( model );
						scene.add( skeletonHelper );

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

							model.geometry.animations = [];

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

							model.mixer = new THREE.AnimationMixer( model );
							animates.push( model.mixer );

							var stand = model.mixer.clipAction( 'stand' );
							stand.setLoop( THREE.LoopRepeat );
							actions[ 'stand' ] = stand;

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

							var dash = model.mixer.clipAction( 'dash' );
							dash.setLoop( THREE.LoopRepeat );
							actions[ 'dash' ] = dash;

							var dashing = model.mixer.clipAction( 'dashing' );
							dashing.setLoop( THREE.LoopPingPong );
							actions[ 'dashing' ] = dashing;

							var damage = model.mixer.clipAction( 'damage' );
							damage.setLoop( THREE.LoopRepeat );
							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;

			} );

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

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

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

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

			var ambientLight = new THREE.AmbientLight( 0x999999 );
			scene.add( ambientLight );

			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 delta = clock.getDelta();

			if ( animates ) {

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

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

				}

			}

			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>