midas
/
threejs-obj-space


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
							<!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'>
	<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
	<div id="info">
		<a href="https://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 /><br/>
		<select id="mech1_anime">
			<option value="stand">stand</option>
			<option value="wark">walk</option>
			<option value="attack">attack</option>
		</select>
	</div>

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

	<script type="module">
		import * as THREE from '../build/three.module.js';

		import Stats from './jsm/libs/stats.module.js';

		import { OrbitControls } from './jsm/controls/OrbitControls.js';
		import { XLoader } from './jsm/loaders/XLoader.js';

		var container, stats, controls;
		var camera, scene, renderer;
		var clock = new THREE.Clock();
		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 () {};

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

			//

			var animationSelection = document.getElementById( 'mech1_anime' );
			animationSelection.addEventListener( 'change', mech1_changeAnime );

		}

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

			var val = event.target.value;

			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>