Web-MMD

> Try it now ! <

For who wants to play MMD in the browser, now you can play it anywhere.

It is improved version of the three.js example.
It also use the postprocessing lib for effects.

Features

• Play MMD with time control bar(time seeking, jump to time...etc)
• Change Model, Stage, Motion, Camera and Music(From YT or file)
• Turn on/off auto camera(can play manually)
• Adjust shadow/outline/color/...etc
• Layout settings (Auto-hide gui/Show FPS/Fullscreen...etc)
• Presets (open/save-as/copy/export as JSON format)
• Camera Composition mode (create/delete/jump forward/backward camera cuts)
• Camera Fixed-Follow mode (can adjust using mouse)
• Keyboard Shortcuts(play/pause, toggle camera mode, manipulate camera cuts...)

Demo credits

• music: GimmexGimme by 八王子P × Giga
• model: つみ式みくさんv4 by つみだんご
• motion: ぎみぎみ（みっちゃん）_原曲音源 by シガー
• emotion: GimmeGimmeリップ表情v07 by ノン
• camera: Gimme x Gimme镜头 by 冬菇
• stage: RedialC_EpRoomDS by RedialC

Development

1. Install deps via npm install
2. Run npm run dev

• Modules which mainly come from the three.js example is refactored to Classes and Async/Await styles.
• This projects is refactored to using Next.js(TypeScript).

Tech stacks

• three.js (For MMD)
• postprocessing.js (For effects)
• Next.js (For static site generating)
• media-chrome (For audio from YT)
• playwright (For testing)

E2E Testing using Playwright

Run npm test

CI/CD

It uses Github Action to deploy the demo site. Relative files located at ./.github/workflows.

To-do list

Done

• play/pause
• turn on/off shawdow
• choose light color
• player control bar
• can choose different model, stage, motion, camera, music
• Layout settings
• Auto-save all gui settings in browser
• Open/Save-As/Copy/Export MMD presets
• SDEF rendering
• camera Fixed-Follow mode
• PBR rendering
• refactor to Typescript
• refactor to @react-three eco-system
• Skybox rendering

WIP

• timeline editor
  • camera composition mode

Planning

• In-APP Credits list