Building a Browser MMD Studio with Three.js

Building a Browser MMD Studio with Three.js



Tópico: Building a Browser MMD Studio with Three.js
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------
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.

---