{"slug": "building-a-browser-mmd-studio-with-three-js", "title": "Building a Browser MMD Studio with Three.js", "summary": "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.", "body_md": "**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.\n\n🔗 **Repository:** [https://github.com/FBNonaMe/animastage-lite](https://github.com/FBNonaMe/animastage-lite)\n\n🌐 **Live demo:** [https://animastage-lite.app/](https://animastage-lite.app/)\n\n🎬 **Open the studio:** [https://animastage-lite.app/app](https://animastage-lite.app/app)\n\nShort-form creators need:\n\n[AnimaStage Lite](https://animastage-lite.app/) is not a full MMD clone — it’s a **focused stage**: load, animate, light, record.\n\n| Layer | Tech |\n|---|---|\n| UI | React 19 + TypeScript |\n| 3D | Three.js + React Three Fiber |\n| Build | Vite 6 |\n| Physics | Bullet (Ammo.js) |\n| HQ video | WebCodecs + mp4-muxer |\n| Live video | MediaRecorder |\n\nAll core features run **client-side**.\n\nOptional: MediaPipe mocap, Gemini AI keys, Local/WebRTC collab.\n\n**Online:** [https://animastage-lite.app/app](https://animastage-lite.app/app) — drop your PMX + VMD.\n\n**Locally:**\n\n```\nbash\ngit clone https://github.com/FBNonaMe/animastage-lite.git\ncd animastage-lite\nnpm install\nnpm run dev\n\nhttps://animastage-lite.app/ — landing\nhttp://localhost:3000/app — studio (local)\nOptional AI: copy .env.example → .env and set VITE_GEMINI_API_KEY.\n\nOpen source\nStar ⭐ the repo, open issues, send PRs: https://github.com/FBNonaMe/animastage-lite\n\nMMD models are not bundled — use only content you have rights to publish.\n\nWhat would you use this for — Shorts, VTuber previews, or learning Three.js? Comments welcome.\n\n---\n```\n\n", "url": "https://wpnews.pro/news/building-a-browser-mmd-studio-with-three-js", "canonical_source": "https://dev.to/fbnoname/building-a-browser-mmd-studio-with-threejs-30pl", "published_at": "2026-05-29 00:28:11+00:00", "updated_at": "2026-05-29 00:41:09.133137+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "computer-vision"], "entities": ["MikuMikuDance", "AnimaStage Lite", "Three.js", "React", "Bullet", "MediaPipe", "Gemini", "Vite"], "alternates": {"html": "https://wpnews.pro/news/building-a-browser-mmd-studio-with-three-js", "markdown": "https://wpnews.pro/news/building-a-browser-mmd-studio-with-three-js.md", "text": "https://wpnews.pro/news/building-a-browser-mmd-studio-with-three-js.txt", "jsonld": "https://wpnews.pro/news/building-a-browser-mmd-studio-with-three-js.jsonld"}}