Skip to content

MMDLoader clean up and document #13975

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 3, 2018
Merged

MMDLoader clean up and document #13975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5d3fff3
Change OutlineEffect parameter format for serialization
takahirox May 2, 2018
7ebb523
Separating MMDAnimationHelper from MMDLoader.js
takahirox May 2, 2018
f3f33b5
Clean up MMDLoader
takahirox May 2, 2018
cd18a7c
Minor update of MMDPhysics
takahirox May 2, 2018
21043ad
Update MMD examples
takahirox May 2, 2018
83ed893
Add MMDLoader documentation
takahirox May 2, 2018
fc38b8c
Add MMDAnimationHelper documentation
takahirox May 2, 2018
dc2eda6
Update docs/list.js
takahirox May 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletions docs/examples/animations/MMDAnimationHelper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<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="http://www.geocities.jp/higuchuu4/index_e.htm"><em>MMD</em></a> resources. <br /><br />
[name] handles animation of MMD assets loaded by [page:MMDLoader] with MMD special features as IK, Grant, and Physics.
</p>

<h2>Example</h2>

<code>
// Instantiate a helper
var helper = new THREE.MMDAnimationHelper();

// Load MMD resources and add to helper
new THREE.MMDLoader().loadWithAnimation(
'models/mmd/miku.pmd',
'models/mmd/dance.vmd',
function ( mmd ) {

helper.add( mmd.mesh, {
animation: mmd.animation,
physics: true
} );

scene.add( mesh );

new THREE.AudioLoader().load(
'audios/mmd/song.mp3',
function ( buffer ) {

var listener = new THREE.AudioListener();
var 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>

[example:webgl_loader_mmd]<br />
[example:webgl_loader_mmd_pose]<br />
[example:webgl_loader_mmd_audio]<br />

<br />
<hr>

<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>
</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>


<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: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:Nummber 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>

[link:https://github.com/mrdoob/three.js/blob/master/examples/js/animation/MMDAnimationHelper.js examples/js/animation/MMDAnimationHelper.js]
</body>
</html>
118 changes: 118 additions & 0 deletions docs/examples/loaders/MMDLoader.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Loader] &rarr;
<h1>[name]</h1>

<p class="desc"> A loader for <a href="http://www.geocities.jp/higuchuu4/index_e.htm"><em>MMD</em></a> resources. <br /><br />
[name] creates Three.js Objects from MMD resources as PMD, PMX, VMD, and VPD files.
You can easily handle MMD special features, as IK, Grant, and Physics, with [page:MMDAnimationHelper].<br /><br />

If you want raw content of MMD resources, use .loadPMD/PMX/VMD/VPD methods.

<h2>Example</h2>

<code>
// Instantiate a loader
var loader = new THREE.MMDLoader();

// Load a MMD model
loader.load(
// path to PMD/PMX file
'models/mmd/miku.pmd',
// called when the resource is loaded
function ( mesh ) {

scene.add( mesh );

},
// called when loading is in progresses
function ( xhr ) {

console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

},
// called when loading has errors
function ( error ) {

console.log( 'An error happened' );

}
);
</code>

[example:webgl_loader_mmd]<br />
[example:webgl_loader_mmd_pose]<br />
[example:webgl_loader_mmd_audio]<br />

<br />
<hr>

<h2>Constructor</h2>

<h3>[name]( [param:LoadingManager manager] )</h3>
<p>
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
</p>
<p>
Creates a new [name].
</p>

<h2>Properties</h2>


<h2>Methods</h2>

<h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String url] — A string containing the path/URL of the <em>.pmd</em> or <em>.pmx</em> file.<br />
[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
</p>
<p>
Begin loading PMD/PMX model file from url and fire the callback function with the parsed [page:SkinnedMesh] containing [page:BufferGeometry] and an array of [page:MeshToonMaterial].
</p>

<h3>[method:null loadAnimation]( [param:String url], [param:Object3D object], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String url] — A string or an array of string containing the path/URL of the <em>.vmd</em> file(s).If two or more files are specified, they'll be merged.<br />
[page:Object3D object] — [page:SkinnedMesh] or [page:Camera]. Clip and its tacks will be fitting to this object.<br />
[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
</p>
<p>
Begin loading VMD motion file(s) from url(s) and fire the callback function with the parsed [page:AnimatioinClip].
</p>

<h3>[method:null loadWithAnimation]( [param:String modelUrl], [param:String vmdUrl], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String modelUrl] — A string containing the path/URL of the <em>.pmd</em> or <em>.pmx</em> file.<br />
[page:String vmdUrl] — A string or an array of string containing the path/URL of the <em>.vmd</em> file(s).<br />
[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
</p>
<p>
Begin loading PMD/PMX model file and VMD motion file(s) from urls and fire the callback function with an [page:Object] containing parsed [page:SkinnedMesh] and [page:AnimationClip] fitting to the [page:SkinnedMesh].
</p>

<h3>[method:MMDLoader setCrossOrigin]( [param:String crossOrigin] )</h3>
<p>
[page:String crossOrigin] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
</p>


<h2>Source</h2>

[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MMDLoader.js examples/js/loaders/MMDLoader.js]
</body>
</html>
5 changes: 5 additions & 0 deletions docs/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,10 @@ var list = {

"Examples": {

"Animations": {
"MMDAnimationHelper": "examples/animations/MMDAnimationHelper"
},

"Controls": {
"OrbitControls": "examples/controls/OrbitControls"
},
Expand All @@ -350,6 +354,7 @@ var list = {
"Loaders": {
"BabylonLoader": "examples/loaders/BabylonLoader",
"GLTFLoader": "examples/loaders/GLTFLoader",
"MMDLoader": "examples/loaders/MMDLoader",
"MTLLoader": "examples/loaders/MTLLoader",
"OBJLoader": "examples/loaders/OBJLoader",
"OBJLoader2": "examples/loaders/OBJLoader2",
Expand Down
Loading