WebアプリでもMMDを踊らせたい

Web上にてARマーカーを使ってミクさんを踊らせるためのサンプルプログラム

Lat式ミクに"地球最後の告白を"を踊らせています

• Youtube

  

• デモサイト

  https://momijinn.github.io/myWebAR_MMD/

• three.js
• AR.js

※ 著作権上、デフォルトでは音楽は流れません ※

※ 後述にて音楽を流せる方法を記載しておきます ※

1. GoogleChrome以外のブラウザ(MicoroSoft Edgeでは動作確認済み)にてIndex.htmlを開く

   ※上記のデモ用のURLではGoogleChromeでも開くことができます

2. Hiroマーカーをカメラに向けるとミクが踊っています

1. "static/mmd/music/"に"地球最後の告白を"の音源をmusic.mp3にリネームして配置する

2. "staitc/js/index.js"にて,"new THREE.MMDLoader().loadWithAnimation"内に入っている音楽を再生する箇所のコメントアウトをはずす

   before

   helper = new THREE.MMDAnimationHelper( {
       afterglow: 2.0
   });
       
   new THREE.MMDLoader().loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
       mesh = mmd.mesh;
   
       // 3dobject
       var model = new THREE.Object3D();
       // Scaleの変換
       model.scale.x = 0.1;
       model.scale.y = 0.1;
       model.scale.z = 0.1;
       model.add(mesh);
   
       helper.add( mesh, {
       animation: mmd.animation,
       physics: true,
       });
   
       //add maker
       marker.add(model);
       
       //Audio
       // new THREE.AudioLoader().load(audioFile, function(buffer){
       //   var listener = new THREE.AudioListener();
       //   var audio = new THREE.Audio( listener ).setBuffer( buffer );
   
       //   listener.position.z = 1;
       
       //   helper.add( audio, audioParams );
       //   marker.add( listener );
   
       //   // Music Load Flag
       //   ready = true;
       // });
       ready = true;
   
   
   }, onProgress, onError );

   after

   helper = new THREE.MMDAnimationHelper( {
       afterglow: 2.0
   });
       
   new THREE.MMDLoader().loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
       mesh = mmd.mesh;
   
       // 3dobject
       var model = new THREE.Object3D();
       // Scaleの変換
       model.scale.x = 0.1;
       model.scale.y = 0.1;
       model.scale.z = 0.1;
       model.add(mesh);
   
       helper.add( mesh, {
       animation: mmd.animation,
       physics: true,
       });
   
       //add maker
       marker.add(model);
       
       //Audio
       new THREE.AudioLoader().load(audioFile, function(buffer){
       var listener = new THREE.AudioListener();
       var audio = new THREE.Audio( listener ).setBuffer( buffer );
   
       listener.position.z = 1;
       
       helper.add( audio, audioParams );
       marker.add( listener );
   
       // Music Load Flag
       ready = true;
       });
       // ready = true; //ここのFlagをコメントアウトする
   
   
   }, onProgress, onError );

3. その後、キャッシュを削除し、Index.htmlを開き直すと音楽が流れる

This software is released under the MIT License, see LICENSE.

本プログラムに使用しているMMD及びモーションは下記の再配布可能のものを利用しています

本プログラムに利用したMMDはLat様のLat式ミクを利用しています

製作者 ： Lat
[email protected]
http://innoce.nobody.jp/

本プログラムに利用したモーションはよぴ様の"【MMD】地球最後の告白を【モーショントレース】"を利用しています

製作者：よぴ
Twitter：@pyopi
Motion：https://www.nicovideo.jp/watch/sm25418510