React MuJoCo Component

This component contains a MuJoCo 2.3.1 compiled against WebAssembly. I also added the required react hooks for using it in a Typescript React project.

Installation

npm install @vuer-ai/mujoco-ts

Usage

import {MuJoCoModel, MuJoCoProvider} from "@vuer-ai/mujoco-ts";

// can present the MuJoCo instance via the following:
<MuJoCoModel
  ref={modelRef}
  speed={speed}
  src={`agility_cassie/scene.xml`}
  assets={[
    "agility_cassie/cassie.xml",
    "agility_cassie/assets/achilles-rod.obj",
    "agility_cassie/assets/cassie-texture.png",
    "agility_cassie/assets/foot-crank.obj",
    "agility_cassie/assets/foot.obj",
    "agility_cassie/assets/heel-spring.obj",
    "agility_cassie/assets/hip-pitch.obj",
    "agility_cassie/assets/hip-roll.obj",
    "agility_cassie/assets/hip-yaw.obj",
    "agility_cassie/assets/knee-spring.obj",
    "agility_cassie/assets/knee.obj",
    "agility_cassie/assets/pelvis.obj",
    "agility_cassie/assets/plantar-rod.obj",
    "agility_cassie/assets/shin.obj",
    "agility_cassie/assets/tarsus.obj"
  ]}/>

Notes on File Path

The src attribute is the path to the MuJoCo XML file. We use the parent director of this entrypoint file as the root directory, and reference all assets relative to this root directory.

Therefore during download, we remove the common prefix assets have with the root directory, and use the remaining path as the target location. For instance, in the example above, the scene.xml file is the entrypoint. Therefore we will download agility_cassie/cassie.xml into the same directory as scene.xml inside the virtual file system of the WebAssembly runtime.

Credits

Built with ❤️ by Ge Yang at Vuer AI.