MMD Viewer

現状

(2025/8/13)

　とりあえず、ChatGPT-5 もとにかく詰まったら使って、MMDモデルを読み込むところまで持っていくことはできた。ただし使い方にクセのある仕様になってしまった。MMD の表示にはモデルファイルだけでなく、テクスチャなどの周辺情報が必要であるが、そこら辺の読み込み方法に関して苦戦していた。まず、直接ファイルパスのURLを渡す以外で、blob の参照のURLも利用できることを試すまでは、うまくいっていたが、それ以降のテクスチャを読み込むことに関しては詰まった。そこら辺に関しては ChatGPT-5 が Map を使う方法を吐き出したのでそれをそのまま利用した。

　正直手軽だとは現状言い難いし、ファイル読み込みにはかなり改善の余地があるものと感じられる。ただ、そのためだけにバックエンドとか用意したくないし悩みものである。なんとかクライアント側の JS で、ZIPファイルだったりをガリガリ処理させられないか考える必要もありそう。

TODOs

1. 最低限 pmx や pmd を読み込み、カメラを動かせる
2. 全画面モードや高解像度モード。
3. blob URLへのMAP変換がうまくいかないバグへの対応

// 例
manager is working
mmdviewer/:516 足.png
mmdviewer/:517 blob:https://www.nyanmo.info/足.png
mmdviewer/:515 

4. 欠損しているテクスチャ画像などのリソースエラーの表示
5. 正しくテクスチャを表示できず、白っぽくなったり、色褪せたみたいな表示になったりする。toon周り未対応の弊害？とにかくもっとまともなマテリアルだのテクスチャだのの実装をする。
6. テクスチャなしとありモードの切り替えボタン
7. 全体的にもっと明るい感じにする。薄暗い感じの解消
8. blender のように、上や横に自動的にカメラを運ぶ機能
9. 透視投影、平行投影の切り替え
10. blender みたいに等間隔の補助線を表示する
11. 地面を表示する。
12. 全画面モードも考慮したコントローラー
13. 専用フォームでない view へのファイルのドラックアンドドロップに対応する
14. いくつかサンプルモーションを用意し、ボタンを押すだけでモデルを動かせるようにする。例えば歩くとか、何か踊らせるとか。
15. 自動で カメラやモデルをぐるぐる動かして、放置していたら全体像を眺められるようにする。
16. WASD や タッチパネル上のコントローラーを用意してモデルを動かせるようにする。
17. 机とか、椅子とか家の一室みたいなのとか、Sample オブジェクトを配置する。
18. youtubeでいう シアターモードみたいなの欲しい。タブ内で全画面みたいな。
19. モデルなどをうまく読み込めなかったときのエラーハンドリングと通知
20. zip ファイルなどを受け付けて、モバイルでも利用しやすくする
21. ボーンを動かせる
22. vmd を読み込める
23. 複数モデル読み込み

調べてわかったこと

MMDLoader

　MMDLoader などは、最新バージョンの three.js にはないっぽいので、古いバージョンを参照する必要がありそう。r170くらいで three.js/examples/jsm /loaders/MMDLoader.js の github の差分に以下のような記述があった。

		console.warn( 'THREE.MMDAnimationHelper: The module has been deprecated and will be removed with r172. Please migrate to https://github.com/takahirox/three-mmd-loader instead.' );

　しかし、URLを辿って、three-mmd-loader を参照してみたところ、“coming soon"となっており、現時点（2025/8/9）ではまだ何もできていないことがわかった。

　こんな状態なので、インターネットから消えるとめんどくさいし、とりあえず適当な場所に、MMD の類が three.js からなくならないうちに r170 のリポジトリごとクローンしておくことにした。

zip.js

　以下は、FS | @zip.js/zip.js の引用したもの。一応簡単に必要そうな部分の使い方のメモとして。ただどうすればいいかは、まだ調査できていない。

• 圧縮

const TEXT_CONTENT = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.";
const FILENAME = "lorem.txt";
const BLOB = new Blob([TEXT_CONTENT], { type: zip.getMimeType(FILENAME) });
let zipFs = new zip.fs.FS();
zipFs.addBlob("lorem.txt", BLOB);
const zippedBlob = await zipFs.exportBlob();

• 展開

zipFs = new zip.fs.FS();
await zipFs.importBlob(zippedBlob);
const firstEntry = zipFs.children[0];
const unzippedBlob = await firstEntry.getBlob(zip.getMimeType(firstEntry.name));