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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - animation - skinning</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: #fff;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				background-color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}
			a {
				color: #bbb;
			}
			.ac {  /* prevent dat-gui from being selected */
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			.no-pointer-events {
				pointer-events: none;
			}
			.control-disabled {
				color: #888;
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<div id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Skeletal Animation Blending
			(model from <a href="http://realitymeltdown.com" target="_blank" rel="noopener">realitymeltdown.com</a>)
			<br><br>camera orbit/zoom/pan with left/middle/right mouse button
			<br>Note: crossfades are possible with blend weights being set to (1,0,0), (0,1,0) or (0,0,1)
		</div>

		<script src="../build/three.js"></script>

		<script src="js/WebGL.js"></script>
		<script src="js/libs/stats.min.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>

		<script>

			if ( WEBGL.isWebGLAvailable() === false ) {

				document.body.appendChild( WEBGL.getWebGLErrorMessage() );

			}

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

			var scene, renderer, camera, controls, stats;
			var mesh, skeleton, mixer;

			var crossFadeControls = [];

			var idleAction, walkAction, runAction;
			var idleWeight, walkWeight, runWeight;
			var actions;
			var settings;

			var clock = new THREE.Clock();

			var singleStepMode = false;
			var sizeOfNextStep = 0;

			var url = 'models/skinned/marine/marine_anims_core.json';


			// Initialize stats (fps display)

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


			// Initialize scene, light and renderer

			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0x333333 );
			scene.add( new THREE.AmbientLight( 0xffffff ) );

			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );

			container.appendChild( renderer.domElement );


			// Load skinned mesh

			new THREE.ObjectLoader().load( url, function ( loadedObject ) {

				loadedObject.traverse( function ( child ) {

					if ( child instanceof THREE.SkinnedMesh ) {

						mesh = child;

					}

				} );

				if ( mesh === undefined ) {

					alert( 'Unable to find a SkinnedMesh in this place:\n\n' + url + '\n\n' );
					return;

				}


				// Add mesh and skeleton helper to scene

				mesh.rotation.y = - 135 * Math.PI / 180;
				scene.add( mesh );

				skeleton = new THREE.SkeletonHelper( mesh );
				skeleton.visible = false;
				scene.add( skeleton );


				// Initialize camera and camera controls

				var radius = mesh.geometry.boundingSphere.radius;

				var aspect = window.innerWidth / window.innerHeight;
				camera = new THREE.PerspectiveCamera( 45, aspect, 1, 10000 );
				camera.position.set( 0.0, radius, radius * 3.5 );

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


				// Create the control panel

				createPanel();


				// Initialize mixer and clip actions

				mixer = new THREE.AnimationMixer( mesh );

				idleAction = mixer.clipAction( 'idle' );
				walkAction = mixer.clipAction( 'walk' );
				runAction = mixer.clipAction( 'run' );
				actions = [ idleAction, walkAction, runAction ];

				activateAllActions();


				// Listen on window resizing and start the render loop

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


			} );


			function createPanel() {

				var panel = new dat.GUI( { width: 310 } );

				var folder1 = panel.addFolder( 'Visibility' );
				var folder2 = panel.addFolder( 'Activation/Deactivation' );
				var folder3 = panel.addFolder( 'Pausing/Stepping' );
				var folder4 = panel.addFolder( 'Crossfading' );
				var folder5 = panel.addFolder( 'Blend Weights' );
				var folder6 = panel.addFolder( 'General Speed' );

				settings = {
					'show model':            true,
					'show skeleton':         false,
					'deactivate all':        deactivateAllActions,
					'activate all':          activateAllActions,
					'pause/continue':        pauseContinue,
					'make single step':      toSingleStepMode,
					'modify step size':      0.05,
					'from walk to idle':     function () { prepareCrossFade( walkAction, idleAction, 1.0 ) },
					'from idle to walk':     function () { prepareCrossFade( idleAction, walkAction, 0.5 ) },
					'from walk to run':      function () { prepareCrossFade( walkAction, runAction, 2.5 ) },
					'from run to walk':      function () { prepareCrossFade( runAction, walkAction, 5.0 ) },
					'use default duration':  true,
					'set custom duration':   3.5,
					'modify idle weight':    0.0,
					'modify walk weight':    1.0,
					'modify run weight':     0.0,
					'modify time scale':     1.0
				};

				folder1.add( settings, 'show model' ).onChange( showModel );
				folder1.add( settings, 'show skeleton' ).onChange( showSkeleton );
				folder2.add( settings, 'deactivate all' );
				folder2.add( settings, 'activate all' );
				folder3.add( settings, 'pause/continue' );
				folder3.add( settings, 'make single step' );
				folder3.add( settings, 'modify step size', 0.01, 0.1, 0.001 );
				crossFadeControls.push( folder4.add( settings, 'from walk to idle' ) );
				crossFadeControls.push( folder4.add( settings, 'from idle to walk' ) );
				crossFadeControls.push( folder4.add( settings, 'from walk to run' ) );
				crossFadeControls.push( folder4.add( settings, 'from run to walk' ) );
				folder4.add( settings, 'use default duration' );
				folder4.add( settings, 'set custom duration', 0, 10, 0.01 );
				folder5.add( settings, 'modify idle weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) { setWeight( idleAction, weight ) } );
				folder5.add( settings, 'modify walk weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) { setWeight( walkAction, weight ) } );
				folder5.add( settings, 'modify run weight', 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) { setWeight( runAction, weight ) } );
				folder6.add( settings, 'modify time scale', 0.0, 1.5, 0.01 ).onChange( modifyTimeScale );

				folder1.open();
				folder2.open();
				folder3.open();
				folder4.open();
				folder5.open();
				folder6.open();

				crossFadeControls.forEach( function ( control ) {

					control.classList1 = control.domElement.parentElement.parentElement.classList;
					control.classList2 = control.domElement.previousElementSibling.classList;

					control.setDisabled = function () {

						control.classList1.add( 'no-pointer-events' );
						control.classList2.add( 'control-disabled' );

					};

					control.setEnabled = function () {

						control.classList1.remove( 'no-pointer-events' );
						control.classList2.remove( 'control-disabled' );

					};

				} );

			}


			function showModel( visibility ) {

				mesh.visible = visibility;

			}


			function showSkeleton( visibility ) {

				skeleton.visible = visibility;

			}


			function modifyTimeScale( speed ) {

				mixer.timeScale = speed;

			}


			function deactivateAllActions() {

				actions.forEach( function ( action ) {

					action.stop();

				} );

			}


			function activateAllActions() {

				setWeight( idleAction, settings[ 'modify idle weight' ] );
				setWeight( walkAction, settings[ 'modify walk weight' ] );
				setWeight( runAction, settings[ 'modify run weight' ] );

				actions.forEach( function ( action ) {

					action.play();

				} );

			}


			function pauseContinue() {

				if ( singleStepMode ) {

					singleStepMode = false;
					unPauseAllActions();

				} else {

					if ( idleAction.paused ) {

						unPauseAllActions();

					} else {

						pauseAllActions();

					}

				}

			}


			function pauseAllActions() {

				actions.forEach( function ( action ) {

					action.paused = true;

				} );

			}


			function unPauseAllActions() {

				actions.forEach( function ( action ) {

					action.paused = false;

				} );

			}


			function toSingleStepMode() {

				unPauseAllActions();

				singleStepMode = true;
				sizeOfNextStep = settings[ 'modify step size' ];

			}


			function prepareCrossFade( startAction, endAction, defaultDuration ) {

				// Switch default / custom crossfade duration (according to the user's choice)

				var duration = setCrossFadeDuration( defaultDuration );

				// Make sure that we don't go on in singleStepMode, and that all actions are unpaused

				singleStepMode = false;
				unPauseAllActions();

				// If the current action is 'idle' (duration 4 sec), execute the crossfade immediately;
				// else wait until the current action has finished its current loop

				if ( startAction === idleAction ) {

					executeCrossFade( startAction, endAction, duration );

				} else {

					synchronizeCrossFade( startAction, endAction, duration );

				}

			}


			function setCrossFadeDuration( defaultDuration ) {

				// Switch default crossfade duration <-> custom crossfade duration

				if ( settings[ 'use default duration' ] ) {

					return defaultDuration;

				} else {

					return settings[ 'set custom duration' ];

				}

			}


			function synchronizeCrossFade( startAction, endAction, duration ) {

				mixer.addEventListener( 'loop', onLoopFinished );

				function onLoopFinished( event ) {

					if ( event.action === startAction ) {

						mixer.removeEventListener( 'loop', onLoopFinished );

						executeCrossFade( startAction, endAction, duration );

					}

				}

			}


			function executeCrossFade( startAction, endAction, duration ) {

				// Not only the start action, but also the end action must get a weight of 1 before fading
				// (concerning the start action this is already guaranteed in this place)

				setWeight( endAction, 1 );
				endAction.time = 0;

				// Crossfade with warping - you can also try without warping by setting the third parameter to false

				startAction.crossFadeTo( endAction, duration, true );

			}


			// This function is needed, since animationAction.crossFadeTo() disables its start action and sets
			// the start action's timeScale to ((start animation's duration) / (end animation's duration))

			function setWeight( action, weight ) {

				action.enabled = true;
				action.setEffectiveTimeScale( 1 );
				action.setEffectiveWeight( weight );

			}


			// Called by the render loop

			function updateWeightSliders() {

				settings[ 'modify idle weight' ] = idleWeight;
				settings[ 'modify walk weight' ] = walkWeight;
				settings[ 'modify run weight' ] = runWeight;

			}


			// Called by the render loop

			function updateCrossFadeControls() {

				crossFadeControls.forEach( function ( control ) {

					control.setDisabled();

				} );

				if ( idleWeight === 1 && walkWeight === 0 && runWeight === 0 ) {

					crossFadeControls[ 1 ].setEnabled();

				}

				if ( idleWeight === 0 && walkWeight === 1 && runWeight === 0 ) {

					crossFadeControls[ 0 ].setEnabled();
					crossFadeControls[ 2 ].setEnabled();

				}

				if ( idleWeight === 0 && walkWeight === 0 && runWeight === 1 ) {

					crossFadeControls[ 3 ].setEnabled();

				}

			}


			function onWindowResize() {

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

				renderer.setSize( window.innerWidth, window.innerHeight );

			}


			function animate() {

				// Render loop

				requestAnimationFrame( animate );

				idleWeight = idleAction.getEffectiveWeight();
				walkWeight = walkAction.getEffectiveWeight();
				runWeight = runAction.getEffectiveWeight();

				// Update the panel values if weights are modified from "outside" (by crossfadings)

				updateWeightSliders();

				// Enable/disable crossfade controls according to current weight values

				updateCrossFadeControls();

				// Get the time elapsed since the last frame, used for mixer update (if not in single step mode)

				var mixerUpdateDelta = clock.getDelta();

				// If in single step mode, make one step and then do nothing (until the user clicks again)

				if ( singleStepMode ) {

					mixerUpdateDelta = sizeOfNextStep;
					sizeOfNextStep = 0;

				}

				// Update the animation mixer, the stats panel, and render this frame

				mixer.update( mixerUpdateDelta );

				stats.update();

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>