🎵 MMD Viewer User Guide

A Three.js-based MMD model viewer with PMX model loading, VMD animation, music sync, and rich render parameter controls.

1. Loading Resources

You can also click the 📚 button to open the Built-in Library with pre-loaded models, motions, and music.

2. Playback Controls

3D Viewport

3. Render Settings

Click the ⚙ button to open the render settings panel with 5 sections:

3.1 Material Parameters

Auto-classified by material name (supports Chinese, Japanese, English):

• 👤 Skin — Diffuse intensity/tint, specular intensity/color/range, Toon, SPH, SSS, bump, matcap mode, opacity
• 💇 Hair — Same as skin (higher specular defaults)
• 👁 Eyes — Specular + self-illumination + emissive color
• 👗 Clothes — Same as skin

3.2 Lighting

• ☀ Key Light — Intensity, color temp (3000K~8000K), XYZ direction, shadow
• 💡 Fill Light — Side fill to soften shadows
• ✨ Rim Light — Backlight edge glow
• 🌐 Hemisphere / 💜 Stage Light

3.3 Post-Processing

3.4 Shadow & Environment

• Shadow resolution (1024/2048/4096) + blur
• Environment reflection intensity
• Fog density

3.5 Stage & Output

• Reflective ground / Glow ring / Grid — toggles
• Tone mapping — ACES / Reinhard / Cineon / Linear / AgX / Neutral
• Exposure, background color
• Camera FOV — 20°~120°
• Animation speed — 0.1x~3x
• Gravity — affects cloth/hair physics

4. Presets

Quick presets at the top of the render panel:

5. Import / Export

• 📤 Export — Save all settings as JSON file
• 📥 Import — Load JSON file to restore settings
• ↺ Reset — Reset all settings to default

Exported JSON files include all render settings and per-material overrides. They can be shared with others or saved as custom presets.

6. Per-Material Editor

Click the 🎨 button in the toolbar to open the Per-Material Editor, allowing independent parameter control for each material:

• Left panel lists all materials grouped by category (Skin/Hair/Eyes/Clothes)
• Click any material to edit its individual parameters on the right
• Changes apply in real-time; overridden parameters are marked in orange
• 👁 Highlight — Highlights the selected material on the model (glows blue) while dimming everything else, so you can see exactly where it is
• ↺ Reset to Category — Clears individual overrides, reverts to category defaults
• Panel is draggable: hold the title bar and drag to reposition, avoiding model obstruction

7. Screenshot

• Click the 📷 button or press P to capture the current frame
• Automatically downloads as a PNG file
• Screenshot includes all post-processing effects

8. Morph / Expression Controls

Click the 😊 button to open the Morph Control Panel:

• Automatically reads morph data from the model (morphTargetDictionary)
• Grouped by MMD standard: 😤 Eyebrow / 👁 Eyes / 👄 Mouth / ✨ Other
• Each morph has a slider (0~1) for real-time preview
• Reset All button to clear all morphs

9. Multi-Model Loading

Click the 👥 button to open the Model Manager Panel:

• Load multiple models simultaneously (new models are added, not replaced)
• Model list shows all loaded models; click a name to set it as active
• 👁 button — show/hide individual models
• ✕ button — remove a model from the scene
• The active model receives motion, morph, and transform operations

10. Model Transform (Position/Rotation/Scale)

Click the ✥ button to enable Transform Controls:

• ↔ Translate mode — drag arrows to move the model
• ↻ Rotate mode — drag rings to rotate the model
• ⇲ Scale mode — drag handles to resize the model
• Transform applies to the currently active model
• Camera orbit is disabled while dragging, restored on release

11. Environment Map / HDR Skybox

At the bottom of the Model Manager panel, you can switch environment maps:

• 5 built-in environments: Default Dark, Daylight Outdoor, Sunset, Indoor Warm, Night Sky
• Load custom HDR files (.hdr / .exr format)
• Check "Environment as Background" to display the env map as scene background
• Environment maps affect model reflections and lighting

12. Fullscreen Mode

• Click the ⛶ button or press F to enter fullscreen
• A floating ✕ button appears in the top-right corner to exit (works on mobile too)
• On desktop, you can also press Esc or F to exit
• In fullscreen, move mouse to top/bottom edges to reveal toolbar and status bar

13. Other Features

• Language — EN/中文 toggle in toolbar, saved in browser
• Mobile — Responsive layout, touch-friendly, auto quality reduction
• Drag & Drop — VMD/audio files can be dropped onto the viewport
• Physics — ammo.js powered hair/skirt/ribbon simulation

14. Keyboard Shortcuts

15. Resource Sites

• Aplaybox — Chinese MMD resource site
• Bowlroll — Japanese MMD sharing platform
• DeviantArt — Search "MMD model DL"
• Niconi 3D — Niconico 3D models