MMD Loader

babylon-mmd: The MMD Loader and Runtime for Babylon.js

Screenshot showing the MMD model in the playground YYB Hatsune Miku_10th by YYB (modified)

MMD is a Japanese 3D animation creation software that has its own 3D model format, PMD/PMX, and motion formats, VPD and VMD.

babylon-mmd is a library focused on loading PMX models and VMD motion files into babylon js and playing high-quality dance animations.


  • Load PMX models and VMD motion files
  • Solve IK, AppendTransform(a.k.a. Append, Grant) and RigidBody / Joint simulation
  • MMD morph system
  • MmdStandardMaterial for PMX models
  • Support multiple models and motions
  • Synced audio playback
  • Player controls (play, pause, etc.)
  • Optimized custom format for MMD models and motions


Playground example of a MMD

Complete MMD Example

Music: メランコリ・ナイト by higma

Model: YYB Hatsune Miku_10th by YYB (modified)

Motion / Camera: by ほうき堂


These are just a few code snippets, please refer to the documentation for full usage


ES6 module:

npm add @babylonjs/core @babylonjs/havok babylon-mmd

UMD module using the html script tag:

<script src=""></script>
<script src=""></script>
<script src=""></script>

UMD module in Playgrounds:

declare const BABYLONMMD: any;
await new Promise((resolve) => {
const babylonMmdScript = document.createElement("script");
babylonMmdScript.src = "";
babylonMmdScript.onload = resolve;

Import PMX Model

Import PMX Model
import "babylon-mmd/esm/Loader/pmxLoader"; // side effect import
const mmdMesh = await SceneLoader.ImportMeshAsync(undefined, "your_model_path.pmx", undefined, scene).then((result) => result.meshes[0]);

load PMX model by SceneLoader.ImportMeshAsync always returns a 1-length array, so you can get the mesh by result.meshes[0].

Import VMD Motion

const vmdLoader = new VmdLoader(scene);
const modelMotion = await vmdLoader.loadAsync("model_motion_1", "your_model_motion_path.vmd");

Play MMD Animation

const mmdRuntime = new MmdRuntime();
const mmdModel = mmdRuntime.createMmdModel(mmdMesh);


In this document, you'll learn how to fully utilize babylon-mmd by creating two pieces of work together.