Mujoco Wasm Init

MuJoCo WASM 動的import・初期化パターン

概要

MuJoCo WASMエンジンをブラウザで動的にロード・初期化するパターン。Emscriptenモジュールの非同期初期化、Reactコンポーネントとの統合方法。

WASM動的importパターン

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; };
}, []);

重要ポイント

1. /* webpackIgnore: true */ - Webpackのモジュールバンドルをバイパスし、ランタイムで動的にロード