webgl_loader_mmd_audio.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - loaders - MMD loader</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link type="text/css" rel="stylesheet" href="main.css">
  8. <style>
  9. body {
  10. background-color: #fff;
  11. color: #444;
  12. }
  13. a {
  14. color: #08f;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="info">
  20. <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - MMDLoader test<br />
  21. <a href="https://github.com/mrdoob/three.js/tree/master/examples/models/mmd#readme" target="_blank" rel="noopener">MMD Assets license</a><br />
  22. Copyright
  23. <a href="http://www.geocities.jp/higuchuu4/index_e.htm" target="_blank" rel="noopener">Model Data</a>
  24. <a href="http://www.nicovideo.jp/watch/sm13147122" target="_blank" rel="noopener">Dance Data</a>
  25. <a href="http://www.nicovideo.jp/watch/sm11938255" target="_blank" rel="noopener">Audio Data</a><br />
  26. Camera is customized from <a href="http://www.nicovideo.jp/watch/sm19168559" target="_blank" rel="noopener">this Data</a>
  27. </div>
  28. <script src="../build/three.js"></script>
  29. <script src="js/libs/mmdparser.min.js"></script>
  30. <script src="js/libs/ammo.js"></script>
  31. <script src="js/loaders/TGALoader.js"></script>
  32. <script src="js/loaders/MMDLoader.js"></script>
  33. <script src="js/effects/OutlineEffect.js"></script>
  34. <script src="js/animation/CCDIKSolver.js"></script>
  35. <script src="js/animation/MMDPhysics.js"></script>
  36. <script src="js/animation/MMDAnimationHelper.js"></script>
  37. <script src="js/libs/stats.min.js"></script>
  38. <script>
  39. var container;
  40. var mesh, camera, scene, renderer, effect;
  41. var helper;
  42. var ready = false;
  43. var clock = new THREE.Clock();
  44. Ammo().then( function( AmmoLib ) {
  45. Ammo = AmmoLib;
  46. init();
  47. animate();
  48. } );
  49. function init() {
  50. container = document.createElement( 'div' );
  51. document.body.appendChild( container );
  52. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  53. // scene
  54. scene = new THREE.Scene();
  55. scene.background = new THREE.Color( 0xffffff );
  56. scene.add( new THREE.PolarGridHelper( 30, 10 ) );
  57. var ambient = new THREE.AmbientLight( 0x666666 );
  58. scene.add( ambient );
  59. var directionalLight = new THREE.DirectionalLight( 0x887766 );
  60. directionalLight.position.set( - 1, 1, 1 ).normalize();
  61. scene.add( directionalLight );
  62. //
  63. renderer = new THREE.WebGLRenderer( { antialias: true } );
  64. renderer.setPixelRatio( window.devicePixelRatio );
  65. renderer.setSize( window.innerWidth, window.innerHeight );
  66. container.appendChild( renderer.domElement );
  67. effect = new THREE.OutlineEffect( renderer );
  68. // model
  69. function onProgress( xhr ) {
  70. if ( xhr.lengthComputable ) {
  71. var percentComplete = xhr.loaded / xhr.total * 100;
  72. console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
  73. }
  74. }
  75. var modelFile = 'models/mmd/miku/miku_v2.pmd';
  76. var vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
  77. var cameraFiles = [ 'models/mmd/vmds/wavefile_camera.vmd' ];
  78. var audioFile = 'models/mmd/audios/wavefile_short.mp3';
  79. var audioParams = { delayTime: 160 * 1 / 30 };
  80. helper = new THREE.MMDAnimationHelper();
  81. var loader = new THREE.MMDLoader();
  82. loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
  83. mesh = mmd.mesh;
  84. helper.add( mesh, {
  85. animation: mmd.animation,
  86. physics: true
  87. } );
  88. loader.loadAnimation( cameraFiles, camera, function ( cameraAnimation ) {
  89. helper.add( camera, {
  90. animation: cameraAnimation
  91. } );
  92. new THREE.AudioLoader().load( audioFile, function ( buffer ) {
  93. var listener = new THREE.AudioListener();
  94. var audio = new THREE.Audio( listener ).setBuffer( buffer );
  95. listener.position.z = 1;
  96. helper.add( audio, audioParams );
  97. scene.add( audio );
  98. scene.add( listener );
  99. scene.add( mesh );
  100. ready = true;
  101. }, onProgress, null );
  102. }, onProgress, null );
  103. }, onProgress, null );
  104. //
  105. window.addEventListener( 'resize', onWindowResize, false );
  106. }
  107. function onWindowResize() {
  108. camera.aspect = window.innerWidth / window.innerHeight;
  109. camera.updateProjectionMatrix();
  110. effect.setSize( window.innerWidth, window.innerHeight );
  111. }
  112. //
  113. function animate() {
  114. requestAnimationFrame( animate );
  115. render();
  116. }
  117. function render() {
  118. if ( ready ) {
  119. helper.update( clock.getDelta() );
  120. }
  121. effect.render( scene, camera );
  122. }
  123. </script>
  124. </body>
  125. </html>