> Try it now ! <

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

This project is inspired by the amazing three.js example which by @takahirox.

• 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)
• Camera Editor mode (can edit on dope-sheet timeline)
• Keyboard Shortcuts(play/pause, toggle camera mode, manipulate camera cuts...)

• Space: Play/Pause
• ` : Toggle Camera mode (between motion and composite mode)
• < : Previous frame (under 30 fps)
• > : Next frame (under 30 fps)
• At camera composite mode
  • → : Previous keyframe
  • ← : Next keyframe

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

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).

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

Run npm test

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

• 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
• timeline editor
  • camera composition mode
  • camera editor mode (using Theatre.js)

• Better bone animation

• In-APP Credits list
• Efficient Bokeh effect