cd /news/ai-tools/building-a-browser-mmd-studio-with-t… Β· home β€Ί topics β€Ί ai-tools β€Ί article
[ARTICLE Β· art-17025] src=dev.to pub= topic=ai-tools verified=true sentiment=↑ positive

Building a Browser MMD Studio with Three.js

An open-source browser-based MMD studio called AnimaStage Lite has been built using Three.js, React 19, and TypeScript, allowing users to load PMX models and VMD motion data, preview animations, add visual effects, and export vertical short-form videos entirely client-side. The project, available on GitHub, also supports optional MediaPipe motion capture and Gemini AI integration, with a live demo accessible online.

read1 min publishedMay 29, 2026

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

Short-form creators need:

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

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.

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

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.

---
── more in #ai-tools 4 stories Β· sorted by recency
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain β€” perfect for shipping the agent you just read about.

$git push zahid main
β†’ Live at https://your-agent.zahid.host βœ“
Get free account β†’ Pricing
from €0/mo Β· no card required
LIVE [news/building-a-browser-m…] indexed:0 read:1min 2026-05-29 Β· β€”