DEV Community

Cover image for Building a Browser MMD Studio with Three.js
FBNonaMe
FBNonaMe

Posted on

Building a Browser MMD Studio with Three.js

MikuMikuDance still lives mostly on the desktop: PMX models, VMD motion, skirt physics, camera work. We built AnimaStage Lite β€” an open-source browser studio so you can load assets, preview motion, add FX, and export vertical Shorts without installing MMD.

πŸ”— Repository: https://github.com/FBNonaMe/animastage-lite

🌐 Live demo: https://animastage-lite.app/

🎬 Open the studio: https://animastage-lite.app/app


Why the browser?

Short-form creators need:

  • 9:16 framing and 1080Γ—1920 export
  • Fast PMX + VMD iteration
  • Stable WebGL on everyday laptops

AnimaStage Lite is not a full MMD clone β€” it’s a focused stage: load, animate, light, record.


Stack

Layer Tech
UI React 19 + TypeScript
3D Three.js + React Three Fiber
Build Vite 6
Physics Bullet (Ammo.js)
HQ video WebCodecs + mp4-muxer
Live video MediaRecorder

All core features run client-side.


What it does

  • Drag & drop PMX/PMD, VMD, textures, HDR
  • Timeline + dopesheet + BΓ©zier curves + VMD export
  • Bullet physics β€” skirt, hair, accessories
  • RTX Lite β€” bloom, DOF, weather, style presets
  • MP4 HQ (frame-by-frame) and Live recording
  • Clean capture β€” no gizmos in the final video
  • 9:16 Lite β€” lighter render path to reduce WebGL context loss

Optional: MediaPipe mocap, Gemini AI keys, Local/WebRTC collab.


Try it

Online: https://animastage-lite.app/app β€” drop your PMX + VMD.

Locally:


bash
git clone https://github.com/FBNonaMe/animastage-lite.git
cd animastage-lite
npm install
npm run dev


https://animastage-lite.app/ β€” landing
http://localhost:3000/app β€” studio (local)
Optional AI: copy .env.example β†’ .env and set VITE_GEMINI_API_KEY.

Open source
Star ⭐ the repo, open issues, send PRs: https://github.com/FBNonaMe/animastage-lite

MMD models are not bundled β€” use only content you have rights to publish.

What would you use this for β€” Shorts, VTuber previews, or learning Three.js? Comments welcome.


---


Enter fullscreen mode Exit fullscreen mode

Top comments (0)