Skip to main content

Component

Dependencies​

npm install @mui/material @mui/icons-material @mui/x-tree-view @emotion/react @emotion/styled wanakana

Babylon.js and babylon-mmd are installed with the package.

If you use Docusaurus, see Issues for a config fix.

Usage​

The example below is live. Edit the code to try your own values. It downloads a 3D model, motions and music, so it can take a moment to start.

Full page player​

A player with music "Melancholy Night", Miku model performing and a single camera motion.

import MMD from "@arclockproject/mmd-player";
// FileBrowser is optional and can be removed.
import FileBrowser from "@arclockproject/common/components/FileBrowser";
▶ Show code (click to view and edit)
Live Editor
<MMD
  maxWidth="1280px"
  maxHeight="720px"
  presets={() => [
    {
      title: "メランコリ・ナイト",
      subTitle: "(Miku Cover)",
      thumbnail: "",
      // Audio source: https://youtu.be/y__uZETTuL8
      music: `${REMOTE.noname0310}/motion/melancholy_night/melancholy_night.mp3`,
      // Motion source: https://www.nicovideo.jp/watch/sm41164308
      vmdCamera: `${REMOTE.base}/メランコリ・ナイト_カメラ.cam.vmd`,
      entities: [
        {
          // Motion source: https://www.nicovideo.jp/watch/sm41164308
          movement: [`${REMOTE.base}/メランコリ・ナイト.chara.vmd`],
          // Model source: https://www.deviantart.com/sanmuyyb/art/YYB-Hatsune-Miku-10th-DL-702119716
          model: {
            file: "yyb_hatsune_miku_10th_v1.02.pmx",
            folder: `${REMOTE.noname0310}/model/yyb_hatsune_miku_10th_ff/`,
          },
        },
      ],
      // Below properties can be excluded if empty (As in "" or [])
      stageFolder: "",
      stagePMX: "",
      entitiesOffset: [],
      entitiesAngle: [],
      actionMemory: [],
    },
  ]}
  rawMMDDetails={() => ({
    pmd: [],
    pmx: [
      `${REMOTE.noname0310}/model/yyb_hatsune_miku_10th_ff/yyb_hatsune_miku_10th_v1.02.pmx`,
    ],
    vmd: [
      `${REMOTE.base}/メランコリ・ナイト_カメラ.cam.vmd`,
      `${REMOTE.base}/メランコリ・ナイト.chara.vmd`,
    ],
  })}
  // FileBrowser is optional and can be removed.
  getFileBrowser={(data) => <FileBrowser {...data} />}
  basePathMMD=""
  loadAudioMeta={(value) => [
    `${REMOTE.base}/${value}.m4a`,
    `${REMOTE.base}/${value}.webp`,
  ]}
  noDebug={false}
/>
Result
Loading...
Debug player state

Each MMD Player has its own state. To read or change it for debugging purposes, pass a ref from useRef to the mmdRef prop, then use ref.current.MMDLoadDetails (MMDLoadDetails API reference).

API​

See the MMD API reference for every prop, method and type.