You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
			
				
					173 lines
				
				5.8 KiB
			
		
		
			
		
	
	
					173 lines
				
				5.8 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								<!DOCTYPE html>
							 | 
						||
| 
								 | 
							
								<html lang="en">
							 | 
						||
| 
								 | 
							
									<head>
							 | 
						||
| 
								 | 
							
										<meta charset="utf-8" />
							 | 
						||
| 
								 | 
							
										<base href="../../../" />
							 | 
						||
| 
								 | 
							
										<script src="page.js"></script>
							 | 
						||
| 
								 | 
							
										<link type="text/css" rel="stylesheet" href="page.css" />
							 | 
						||
| 
								 | 
							
									</head>
							 | 
						||
| 
								 | 
							
									<body>
							 | 
						||
| 
								 | 
							
										<h1>[name]</h1>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<p class="desc"> A animation helper for <a href="https://sites.google.com/view/evpvp/">`MMD`</a> resources. <br /><br />
							 | 
						||
| 
								 | 
							
										[name] handles animation of MMD assets loaded by [page:MMDLoader] with MMD special features as IK, Grant, and Physics.
							 | 
						||
| 
								 | 
							
										It uses [page:CCDIKSolver] and [page:MMDPhysics] inside.
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h2>Code Example</h2>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<code>
							 | 
						||
| 
								 | 
							
										// Instantiate a helper
							 | 
						||
| 
								 | 
							
										const helper = new MMDAnimationHelper();
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// Load MMD resources and add to helper
							 | 
						||
| 
								 | 
							
										new MMDLoader().loadWithAnimation(
							 | 
						||
| 
								 | 
							
											'models/mmd/miku.pmd',
							 | 
						||
| 
								 | 
							
											'models/mmd/dance.vmd',
							 | 
						||
| 
								 | 
							
											function ( mmd ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												helper.add( mmd.mesh, {
							 | 
						||
| 
								 | 
							
													animation: mmd.animation,
							 | 
						||
| 
								 | 
							
													physics: true
							 | 
						||
| 
								 | 
							
												} );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												scene.add( mmd.mesh );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												new THREE.AudioLoader().load(
							 | 
						||
| 
								 | 
							
													'audios/mmd/song.mp3',
							 | 
						||
| 
								 | 
							
													function ( buffer ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
														const listener = new THREE.AudioListener();
							 | 
						||
| 
								 | 
							
														const audio = new THREE.Audio( listener ).setBuffer( buffer );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
														listener.position.z = 1;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
														scene.add( audio );
							 | 
						||
| 
								 | 
							
														scene.add( listener );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
													}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function render() {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											helper.update( clock.getDelta() );
							 | 
						||
| 
								 | 
							
											renderer.render( scene, camera );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
										</code>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h2>Examples</h2>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
											[example:webgl_loader_mmd]<br />
							 | 
						||
| 
								 | 
							
											[example:webgl_loader_mmd_pose]<br />
							 | 
						||
| 
								 | 
							
											[example:webgl_loader_mmd_audio]
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h2>Constructor</h2>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[name]( [param:Object params] )</h3>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										[page:Object params] — (optional)<br />
							 | 
						||
| 
								 | 
							
										<ul>
							 | 
						||
| 
								 | 
							
											<li> [page:Boolean sync] - Whether animation durations of added objects are synched. Default is true.</li>
							 | 
						||
| 
								 | 
							
											<li> [page:Number afterglow] - Default is 0.0.</li>
							 | 
						||
| 
								 | 
							
											<li> [page:Boolean resetPhysicsOnLoop] - Default is true.</li>
							 | 
						||
| 
								 | 
							
											<li> [page:Boolean pmxAnimation] - If it is set to true, the helper follows the complex and costly PMX animation system.
							 | 
						||
| 
								 | 
							
											Try this option only if your PMX model animation doesn't work well. Default is false.</li>
							 | 
						||
| 
								 | 
							
										</ul>
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										Creates a new [name].
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h2>Properties</h2>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[property:Audio audio]</h3>
							 | 
						||
| 
								 | 
							
										<p>An [page:Audio] added to helper.</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[property:Camera camera]</h3>
							 | 
						||
| 
								 | 
							
										<p>An [page:Camera] added to helper.</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[property:Array meshes]</h3>
							 | 
						||
| 
								 | 
							
										<p>An array of [page:SkinnedMesh] added to helper.</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[property:WeakMap objects]</h3>
							 | 
						||
| 
								 | 
							
										<p>A [page:WeakMap] which holds animation stuffs used in helper for objects added to helper. For example, you can access [page:AnimationMixer] for an added [page:SkinnedMesh] with "helper.objects.get( mesh ).mixer"</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[property:Function onBeforePhysics]</h3>
							 | 
						||
| 
								 | 
							
										<p>An optional callback that is executed immediately before the physicis calculation for an [page:SkinnedMesh]. This function is called with the [page:SkinnedMesh].</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h2>Methods</h2>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[method:MMDAnimationHelper add]( [param:Object3D object], [param:Object params] )</h3>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										[page:Object3D object] — [page:SkinnedMesh], [page:Camera], or [page:Audio]<br />
							 | 
						||
| 
								 | 
							
										[page:Object params] — (optional)<br />
							 | 
						||
| 
								 | 
							
										<ul>
							 | 
						||
| 
								 | 
							
											<li>[page:AnimationClip animation] - an [page:AnimationClip] or an array of [page:AnimationClip] set to object. Only for [page:SkinnedMesh] and [page:Camera]. Default is undefined.</li>
							 | 
						||
| 
								 | 
							
											<li>[page:Boolean physics] - Only for [page:SkinnedMesh]. A flag whether turn on physics. Default is true.</li>
							 | 
						||
| 
								 | 
							
											<li>[page:Integer warmup] - Only for [page:SkinnedMesh] and physics is true. Physics parameter. Default is 60.</li>
							 | 
						||
| 
								 | 
							
											<li>[page:Number unitStep] - Only for [page:SkinnedMesh] and physics is true. Physics parameter. Default is 1 / 65.</li>
							 | 
						||
| 
								 | 
							
											<li>[page:Integer maxStepNum] - Only for [page:SkinnedMesh] and physics is true. Physics parameter. Default is 3.</li>
							 | 
						||
| 
								 | 
							
											<li>[page:Vector3 gravity] - Only for [page:SkinnedMesh] and physics is true. Physics parameter. Default is ( 0, - 9.8 * 10, 0 ).</li>
							 | 
						||
| 
								 | 
							
											<li>[page:Number delayTime] - Only for [page:Audio]. Default is 0.0.</li>
							 | 
						||
| 
								 | 
							
										</ul>
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										Add an [page:SkinnedMesh], [page:Camera], or [page:Audio] to helper and setup animation. The anmation durations of added objects are synched.
							 | 
						||
| 
								 | 
							
										If camera/audio has already been added, it'll be replaced with a new one.
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[method:MMDAnimationHelper enable]( [param:String key], [param:Boolean enabled] )</h3>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										[page:String key] — Allowed strings are 'animation', 'ik', 'grant', 'physics', and 'cameraAnimation'.<br />
							 | 
						||
| 
								 | 
							
										[page:Boolean enabled] — true is enable, false is disable<br />
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										Enable/Disable an animation feature
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[method:MMDAnimationHelper pose]( [param:SkinnedMesh mesh], [param:Object vpd], [param:Object params] )</h3>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										[page:SkinnedMesh mesh] — [page:SkinnedMesh] which changes the posing. It doesn't need to be added to helper.<br />
							 | 
						||
| 
								 | 
							
										[page:Object vpd] — VPD content obtained by [page:MMDLoader].loadVPD<br />
							 | 
						||
| 
								 | 
							
										[page:Object params] — (optional)<br />
							 | 
						||
| 
								 | 
							
										<ul>
							 | 
						||
| 
								 | 
							
											<li>[page:Boolean resetPose] - Default is true.</li>
							 | 
						||
| 
								 | 
							
											<li>[page:Boolean ik] - Default is true.</li>
							 | 
						||
| 
								 | 
							
											<li>[page:Boolean grant] - Default is true.</li>
							 | 
						||
| 
								 | 
							
										</ul>
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										Changes the posing of [page:SkinnedMesh] as VPD content specifies.
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[method:MMDAnimationHelper remove]( [param:Object3D object] )</h3>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										[page:Object3D object] — [page:SkinnedMesh], [page:Camera], or [page:Audio]<br />
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										Remove an [page:SkinnedMesh], [page:Camera], or [page:Audio] from helper.
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h3>[method:MMDAnimationHelper update]( [param:Number delta] )</h3>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										[page:Number delta] — number in second<br />
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
										Advance mixer time and update the animations of objects added to helper
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<h2>Source</h2>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										<p>
							 | 
						||
| 
								 | 
							
											[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/animation/MMDAnimationHelper.js examples/jsm/animation/MMDAnimationHelper.js]
							 | 
						||
| 
								 | 
							
										</p>
							 | 
						||
| 
								 | 
							
									</body>
							 | 
						||
| 
								 | 
							
								</html>
							 |