MuJoCo WASMの動的import・Emscriptenモジュール初期化パターン。webpackIgnore、locateFile、React統合。mujoco wasm init dynamic import emscripten
MuJoCo WASMエンジンをブラウザで動的にロード・初期化するパターン。Emscriptenモジュールの非同期初期化、Reactコンポーネントとの統合方法。
useEffect(() => {
let isMounted = true;
// @ts-ignore - webpackIgnoreで型チェックスキップ
import(/* webpackIgnore: true */ '/mujoco/mujoco_wasm.js?v=' + Date.now())
.then((module) => {
const initMujoco = module.default;
return initMujoco({
locateFile: (path: string) => `/mujoco/${path}`,
});
})
.then((m) => {
if (isMounted) {
setMujoco(m);
}
})
.catch((err) => {
if (isMounted) {
setError('MuJoCo WASMの読み込みに失敗: ' + err.message);
}
});
return () => { isMounted = false; };
}, []);
/* webpackIgnore: true */ - Webpackのモジュールバンドルをバイパスし、ランタイムで動的にロード?v= + Date.now() - ブラウザキャッシュバスティング。開発中のWASM更新を即座に反映locateFileコールバック - Emscriptenが.wasmファイルを見つけるためのパス解決関数isMountedフラグ - Reactコンポーネントアンマウント後のsetState防止(メモリリーク対策)module.default - Emscriptenのデフォルトエクスポートが初期化関数m)の主要APIm.FS - Emscripten仮想ファイルシステムm.Model - MuJoCoモデルクラスm.State - シミュレーション状態クラスm.Simulation - シミュレーションクラスconst [mujoco, setMujoco] = useState<any>(null); // Emscriptenモジュール
const [model, setModel] = useState<any>(null); // MuJoCoモデル
const [data, setData] = useState<any>(null); // シミュレーションデータ
const [error, setError] = useState<string | null>(null);
any 型(WASMバインディングに型定義がないため)"use client"必須)windowやWebAssemblyが存在しないためエラーになる