惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
WordPress大学
WordPress大学
阮一峰的网络日志
阮一峰的网络日志
V
Visual Studio Blog
雷峰网
雷峰网
博客园_首页
The Cloudflare Blog
Hugging Face - Blog
Hugging Face - Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
爱范儿
爱范儿
小众软件
小众软件
D
Docker
P
Proofpoint News Feed
B
Blog
Vercel News
Vercel News
B
Blog RSS Feed
U
Unit 42
月光博客
月光博客
The GitHub Blog
The GitHub Blog
Apple Machine Learning Research
Apple Machine Learning Research
Y
Y Combinator Blog
I
InfoQ
Recent Announcements
Recent Announcements

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Building a Browser MMD Studio with Three.js
FBNonaMe · 2026-05-29 · via DEV Community
Cover image for Building a Browser MMD Studio with Three.js

FBNonaMe

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.


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.


---