Integrate Anime Models in Three.js with MMDLoader

This article explains how the Three.js library utilizes the MMDLoader to import and animate Japanese MikuMikuDance (MMD) assets. You will learn how this specialized loader parses PMD and PMX 3D models, processes VMD motion files, manages inverse kinematics, and synchronizes audio to recreate complex anime-style dance animations directly within a web browser.

Understanding MMD Formats and MMDLoader

MikuMikuDance is a popular freeware animation program that uses proprietary file formats for 3D models and motion data. Specifically, models use the .pmd or .pmx extensions, while motion data—including character movement, facial expressions, and camera angles—is saved in .vmd files.

Because these formats do not align with standard web graphics formats like glTF or FBX, Three.js provides a dedicated addon called MMDLoader. This loader parses the binary data of MMD files and translates them into native Three.js objects, such as SkinnedMesh, materials, and textures, making them readable by the WebGL renderer.

Loading the Model and Textures

The integration process begins by instantiating the MMDLoader. When loading a .pmx or .pmd file, the loader reads the geometry, bone hierarchy, morph targets (for facial expressions), and material properties.

MMD models rely heavily on toon shading and distinct black outlines to achieve their signature anime aesthetic. MMDLoader automatically generates MeshToonMaterial instances and utilizes the OutlineEffect post-processing pass in Three.js to render these artistic outlines, ensuring the 3D model retains its original 2D-inspired look.

Applying Motion and Facial Expressions

Once the model is loaded into the scene, motion is applied using .vmd files. The MMDLoader parses these files to extract keyframe animation data for bones and morph targets.

To coordinate these complex movements, Three.js uses a helper class called MMDAnimationHelper. This helper acts as the central controller, binding the loaded model to the animation timeline. It translates the VMD keyframe data into a Three.js AnimationMixer, which smoothly interpolates the character’s positions, rotations, and facial morphs frame-by-frame.

Physics and Inverse Kinematics (IK)

Anime dance animations often feature highly dynamic movements, requiring realistic physics for hair, skirts, and accessories, as well as precise limb positioning. MMDLoader and MMDAnimationHelper handle these through two main systems:

• Inverse Kinematics (IK): MMD models use Coordinate Descent Inverse Kinematics (CCDIK) to calculate how joints should bend. When a dancer’s foot is pinned to the floor, the IK solver automatically calculates the correct rotation for the ankles, knees, and hips.
• Physics Integration: To prevent hair and clothing from clipping through the body, MMDAnimationHelper integrates with Ammo.js (a WebAssembly port of the Bullet physics engine). It translates MMD rigid bodies and constraints into physical colliders, allowing hair and clothing to bounce and flow naturally in response to the character’s dance movements.

Audio Synchronization

A dancing model must remain perfectly in sync with its accompanying music track. The MMDAnimationHelper achieves this by binding a Three.js Audio listener directly to the animation clock.

Instead of relying on browser frame rates—which can fluctuate and cause the visual animation to drift away from the audio—the helper constantly calibrates the animation mixer’s time to match the exact playback timestamp of the audio file. This guarantees that the anime character’s dance moves remain perfectly synchronized with the beat of the music.