Update MMD examples

examples/webgl_loader_mmd.html

@@ -43,6 +43,7 @@
 		<script src="js/effects/OutlineEffect.js"></script>
 		<script src="js/animation/CCDIKSolver.js"></script>
 		<script src="js/animation/MMDPhysics.js"></script>
+		<script src="js/animation/MMDAnimationHelper.js"></script>
 
 		<script src="js/controls/OrbitControls.js"></script>
 
@@ -120,37 +121,34 @@
 				var modelFile = 'models/mmd/miku/miku_v2.pmd';
 				var vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
 
-				helper = new THREE.MMDHelper();
+				helper = new THREE.MMDAnimationHelper( {
+					afterglow: 2.0
+				} );
 
 				var loader = new THREE.MMDLoader();
 
-				loader.load( modelFile, vmdFiles, function ( object ) {
+				loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
 
-					mesh = object;
+					mesh = mmd.mesh;
 					mesh.position.y = -10;
 					scene.add( mesh );
 
-					helper.add( mesh );
-					helper.setAnimation( mesh );
+					helper.add( mesh, {
+						animation: mmd.animation,
+						physics: true
+					} );
 
 					/*
-					 * Note: create CCDIKHelper after calling helper.setAnimation()
+					 * Note: create CCDIKHelper and MMDPhysicsHelper after calling helper.add( mesh )
 					 */
 					ikHelper = new THREE.CCDIKHelper( mesh );
 					ikHelper.visible = false;
 					scene.add( ikHelper );
 
-					/*
-					 * Note: You're recommended to call helper.setPhysics()
-					 *       after calling helper.setAnimation().
-			 		 */
-					helper.setPhysics( mesh );
-					physicsHelper = new THREE.MMDPhysicsHelper( mesh );
+					physicsHelper = new THREE.MMDPhysicsHelper( mesh, helper.objects.get( mesh ).physics );
 					physicsHelper.visible = false;
 					scene.add( physicsHelper );
 
-					helper.unifyAnimationDuration( { afterglow: 2.0 } );
-
 					initGui();
 
 				}, onProgress, onError );
@@ -195,7 +193,7 @@
 					var gui = new dat.GUI();
 
 					gui.add( api, 'animation' ).onChange( function () {
-						helper.doAnimation = api[ 'animation' ];
+						helper.enable( 'animation', api[ 'animation' ] );
 					} );
 
 					gui.add( api, 'gradient mapping' ).onChange( function () {
@@ -216,7 +214,7 @@
 					} );
 
 					gui.add( api, 'ik' ).onChange( function () {
-						helper.doIk = api[ 'ik' ];
+						helper.enable( 'ik', api[ 'ik' ] );
 					} );
 
 					gui.add( api, 'outline' ).onChange( function () {
@@ -224,7 +222,7 @@
 					} );
 
 					gui.add( api, 'physics' ).onChange( function () {
-						helper.enablePhysics( api[ 'physics' ] );
+						helper.enable( 'physics', api[ 'physics' ] );
 					} );
 
 					gui.add( api, 'show IK bones' ).onChange( function () {
@@ -265,9 +263,11 @@
 
 			function render() {
 
-				helper.animate( clock.getDelta() );
+				helper.update( clock.getDelta() );
+
 				if ( physicsHelper !== undefined && physicsHelper.visible ) physicsHelper.update();
 				if ( ikHelper !== undefined && ikHelper.visible ) ikHelper.update();
+
 				effect.render( scene, camera );
 
 			}

examples/webgl_loader_mmd_audio.html

@@ -45,6 +45,7 @@
 		<script src="js/effects/OutlineEffect.js"></script>
 		<script src="js/animation/CCDIKSolver.js"></script>
 		<script src="js/animation/MMDPhysics.js"></script>
+		<script src="js/animation/MMDAnimationHelper.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -116,36 +117,33 @@
 				var audioFile = 'models/mmd/audios/wavefile_short.mp3';
 				var audioParams = { delayTime: 160 * 1 / 30 };
 
-				helper = new THREE.MMDHelper();
+				helper = new THREE.MMDAnimationHelper();
 
 				var loader = new THREE.MMDLoader();
 
-				loader.load( modelFile, vmdFiles, function ( object ) {
+				loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
 
-					mesh = object;
+					mesh = mmd.mesh;
 
-					helper.add( mesh );
-					helper.setAnimation( mesh );
-					helper.setPhysics( mesh );
+					helper.add( mesh, {
+						animation: mmd.animation,
+						physics: true
+					} );
 
-					loader.loadVmds( cameraFiles, function ( vmd ) {
+					loader.loadAnimation( cameraFiles, camera, function ( cameraAnimation ) {
 
-						helper.setCamera( camera );
+						helper.add( camera, {
+							animation: cameraAnimation
+						} );
 
-						loader.pourVmdIntoCamera( camera, vmd );
-						helper.setCameraAnimation( camera );
+						new THREE.AudioLoader().load( audioFile, function ( buffer ) {
 
-						loader.loadAudio( audioFile, function ( audio, listener ) {
+							var listener = new THREE.AudioListener();
+							var audio = new THREE.Audio( listener ).setBuffer( buffer );
 
 							listener.position.z = 1;
 
-							helper.setAudio( audio, listener, audioParams );
-
-							/*
-							 * Note: call this method after you set all animations
-							 *       including camera and audio.
-							 */
-							helper.unifyAnimationDuration();
+							helper.add( audio, audioParams );
 
 							scene.add( audio );
 							scene.add( listener );
@@ -199,7 +197,7 @@
 
 				if ( ready ) {
 
-					helper.animate( clock.getDelta() );
+					helper.update( clock.getDelta() );
 
 				}
 

examples/webgl_loader_mmd_pose.html

@@ -43,6 +43,7 @@
 		<script src="js/effects/OutlineEffect.js"></script>
 		<script src="js/animation/CCDIKSolver.js"></script>
 		<script src="js/animation/MMDPhysics.js"></script>
+		<script src="js/animation/MMDAnimationHelper.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -118,11 +119,11 @@
 					'models/mmd/vpds/11.vpd'
 				];
 
-				helper = new THREE.MMDHelper();
+				helper = new THREE.MMDAnimationHelper();
 
 				var loader = new THREE.MMDLoader();
 
-				loader.loadModel( modelFile, function ( object ) {
+				loader.load( modelFile, function ( object ) {
 
 					mesh = object;
 					mesh.position.y = -10;
@@ -135,7 +136,7 @@
 
 						var vpdFile = vpdFiles[ vpdIndex ];
 
-						loader.loadVpd( vpdFile, function ( vpd ) {
+						loader.loadVPD( vpdFile, false, function ( vpd ) {
 
 							vpds.push( vpd );
 
@@ -254,7 +255,7 @@
 
 						} else {
 
-							helper.poseAsVpd( mesh, vpds[ index ] );
+							helper.pose( mesh, vpds[ index ] );
 
 						}