Skip to main content

Component

Dependencies for @arclockproject/mmd-player are

@mui/material @emotion/react @emotion/styled @mui/x-tree-view babylon-mmd @babylonjs/core @babylonjs/havok @babylonjs/materials wanakana

Library currently is limited to rendering one Instance of MMD on a single page

FullScreenMMDPlayer​

Example of a full paged MMD Player",

import MMD from "@arclockproject/mmd-player";
// FileBrowser is optional and can be removed!
import FileBrowser from "@arclockproject/common/components/FileBrowser";
Live Editor
<MMD
  maxWidth="1280px"
  maxHeight="720px"
  presets={() => [
    {
      title: "メランコリ・ナイト",
      subTitle: "(Miku Cover)",
      thumbnail: "",
      // Audio source: https://youtu.be/y__uZETTuL8
      music:
        "https://noname0310.github.io/web-mmd-viewer/melancholic_night/mmd_public/motion/melancholy_night/melancholy_night.mp3",
      // Motion source: https://www.nicovideo.jp/watch/sm41164308
      vmdCamera:
        "https://arturwagner.co.uk/demo-assets/メランコリ・ナイト_カメラ.cam.vmd",
      entities: [
        {
          // Motion source: https://www.nicovideo.jp/watch/sm41164308
          movement: [
            "https://arturwagner.co.uk/demo-assets/メランコリ・ナイト.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:
              "https://noname0310.github.io/web-mmd-viewer/melancholic_night/mmd_public/model/yyb_hatsune_miku_10th_ff/",
          },
        },
      ],
      // Below properties can be excluded if empty (As in "" or [])
      stageFolder: "",
      stagePMX: "",
      entitiesOffset: [],
      entitiesAngle: [],
      actionMemory: [],
    },
  ]}
  rawMMDDetails={() => ({
    pmd: [],
    pmx: [
      "https://noname0310.github.io/web-mmd-viewer/melancholic_night/mmd_public/model/yyb_hatsune_miku_10th_ff/yyb_hatsune_miku_10th_v1.02.pmx",
    ],
    vmd: [
      "https://arturwagner.co.uk/demo-assets/メランコリ・ナイト_カメラ.cam.vmd",
      "https://arturwagner.co.uk/demo-assets/メランコリ・ナイト.chara.vmd",
    ],
    all: [
      "https://noname0310.github.io/web-mmd-viewer/melancholic_night/mmd_public/model/yyb_hatsune_miku_10th_ff/yyb_hatsune_miku_10th_v1.02.pmx",
      "https://arturwagner.co.uk/demo-assets/メランコリ・ナイト_カメラ.cam.vmd",
      "https://arturwagner.co.uk/demo-assets/メランコリ・ナイト.chara.vmd",
    ],
  })}
  // FileBrowser is optional and can be removed!
  getFileBrowser={(data) => <FileBrowser {...data} />}
  basePathMMD=""
  loadAudioMeta={(value) => [
    `https://arturwagner.co.uk/demo-assets/${value}.m4a`,
    `https://arturwagner.co.uk/demo-assets/${value}.webp`,
  ]}
/>
Result
Loading...