Web-MMD

Try it now! -> https://culdo.github.io/web-mmd/

For who wants to play MMD in the browser, you can now 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 playing 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/del/next/prev camera cut)
Camera Fixed-Follow mode (can adjust using orbit controls)
Keyboard Shortcuts(play/pause, toggle camera mode, manipulate camera cut...)

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

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)
video.js (For audio from YT)
playwright (For testing)

E2E Testing using Playwright

Run npm test

CI/CD

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

culdo/web-mmd