携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
实现
参考example:
MMDLoader：
MMDAnimationHelper：
首先，我们先初始化场景，摄像机，渲染器，光照，轨道控制器等，然后我们使用mmdloader加载mmd模型，我们需要一个模型的路径和他的动作路径，还需要一个处理mmd的MMDAnimationHelper
let helper = new MMDAnimationHelper();
const modelFile = 'mmd模型路径';
const vmdFiles = [ '动作数据路径' ];
const loader = new MMDLoader();
loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
mesh = mmd.mesh;
helper.add( mesh, {
animation: mmd.animation,
physics: true
} );
当我们仿造着example执行以上代码时，发现并没有效果，还需要引入ammo物理引擎，这块不是很清楚，等以后了解后再来修改。使用ammo。
<script src="./public/js/ammo.wasm.js"></script>
Ammo().then(function(AmmoLib)
{
Ammo=AmmoLib;
init();
})
我们可以看到可爱的初音就动起来了，也可以把初音的model换成其他人物
接下来我们来添加声音可以参考www.webgl3d.cn/Three.js/
let audio = new THREE.Audio(listener);
let audioLoader = new THREE.AudioLoader();
audioLoader.load('音频文件地址', function(AudioBuffer) {
audio.setBuffer(AudioBuffer);
audio.setLoop(true);
audio.setVolume(0.5);
audio.play();
})
也可以按照 example里那么写
const modelFile = 'models/mmd/miku/miku_v2.pmd';
const vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
const cameraFiles = [ 'models/mmd/vmds/wavefile_camera.vmd' ];
const audioFile = 'models/mmd/audios/wavefile_short.mp3';
const audioParams = { delayTime: 160 * 1 / 30 };
helper = new MMDAnimationHelper();
const loader = new MMDLoader();
oader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
mesh = mmd.mesh;
helper.add( mesh, {
animation: mmd.animation,
physics: true
} );
//loader.loadAnimation( cameraFiles, camera, function ( cameraAnimation ) {
//helper.add( camera, {animation: cameraAnimation} );
new THREE.AudioLoader().load( audioFile, function ( buffer ) {
const audio = new THREE.Audio( listener ).setBuffer( buffer );
helper.add( audio, audioParams );
scene.add( mesh );
ready = true;
}, onProgress, null );
//}, onProgress, null );
, onProgress, null );
function onProgress( xhr ) {
if ( xhr.lengthComputable ) {
const percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
}
}
但此时，我们可能仍然听不见声音，可以打开浏览器设置一下，打开网站设置，将声音设置为允许就可以听到声音了。
如果要添加摄像机运动则可以将上述的loader.loadAnimation写入。
最后
由于个人水平有限，也没用过MikuMikuDance，对这个也没有理解很到位，只能做到基本使用，等能力足够时，再对文章进行修改。欢迎了解过的大佬再评论区再介绍一下。8月31日是初音的生日，祝世界第一公主殿下15周年生日快乐。
封面模型为Asoul虚拟女团 身高一米吧的嘉然，可在模之屋下载
www.aplaybox.com/details/mod…【MMD模型来自@A-SOUL_Official，模型版权归@A-SOUL_Official所有】
封面动作数据为《我们快出发》MMD动作数据
本数据是虚拟偶像【泠鸢yousa】与【嘉然Diana】的合作曲目《我们快出发》的MMD动作数据 由【冰糖IO】进行配布发放。
