mujoco-react 8.2.0 → 8.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mujoco-react",
-  "version": "8.2.0",
+  "version": "8.3.3",
   "description": "Composable React Three Fiber building blocks for MuJoCo WASM simulations",
   "type": "module",
   "main": "./dist/index.js",
@@ -34,7 +34,7 @@
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/noah-wardlow/mujoco-react"
+    "url": "git+https://github.com/noah-wardlow/mujoco-react.git"
   },
   "scripts": {
     "build": "tsup",
@@ -48,7 +48,7 @@
     "three": ">=0.160.0"
   },
   "dependencies": {
-    "mujoco-js": "0.0.7"
+    "@mujoco/mujoco": "^3.9.0"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",

package/src/components/ContactMarkers.tsx

@@ -13,7 +13,7 @@ import { useFrame } from '@react-three/fiber';
 import type { ThreeElements } from '@react-three/fiber';
 import * as THREE from 'three';
 import { useMujocoContext } from '../core/MujocoSimProvider';
-import { getContact } from '../types';
+import { getContact, withContacts } from '../types';
 
 const _dummy = new THREE.Object3D();
 
@@ -49,19 +49,21 @@ export function ContactMarkers({
     const ncon = data.ncon;
     const count = Math.min(ncon, maxContacts);
 
-    for (let i = 0; i < count; i++) {
-      const c = getContact(data, i);
-      if (!c) {
-        mesh.count = i;
-        mesh.instanceMatrix.needsUpdate = true;
-        return;
+    let resolvedCount = count;
+    withContacts(data, (contactArray) => {
+      for (let i = 0; i < count; i++) {
+        const c = getContact(contactArray, i);
+        if (!c) {
+          resolvedCount = i;
+          return;
+        }
+        _dummy.position.set(c.pos[0], c.pos[1], c.pos[2]);
+        _dummy.updateMatrix();
+        mesh.setMatrixAt(i, _dummy.matrix);
       }
-      _dummy.position.set(c.pos[0], c.pos[1], c.pos[2]);
-      _dummy.updateMatrix();
-      mesh.setMatrixAt(i, _dummy.matrix);
-    }
+    });
 
-    mesh.count = count;
+    mesh.count = resolvedCount;
     mesh.instanceMatrix.needsUpdate = true;
   });
 

package/src/components/Debug.tsx

@@ -11,7 +11,7 @@ import type { ThreeElements } from '@react-three/fiber';
 import * as THREE from 'three';
 import { useMujocoContext } from '../core/MujocoSimProvider';
 import { getName } from '../core/SceneLoader';
-import { getContact } from '../types';
+import { getContact, withContacts } from '../types';
 import type { DebugProps } from '../types';
 
 const JOINT_COLORS: Record<number, number> = {
@@ -330,22 +330,24 @@ export function Debug({
     const ncon = data.ncon;
     let arrowIdx = 0;
 
-    for (let i = 0; i < Math.min(ncon, MAX_CONTACT_ARROWS); i++) {
-      const c = getContact(data, i);
-      if (!c) break;
-      _contactPos.set(c.pos[0], c.pos[1], c.pos[2]);
-      _contactNormal.set(c.frame[0], c.frame[1], c.frame[2]);
-      const force = Math.abs(c.dist) * 100;
-      const length = Math.min(force * 0.01, 0.1);
-      if (length > 0.001 && arrowIdx < pool.length) {
-        const arrow = pool[arrowIdx];
-        arrow.position.copy(_contactPos);
-        arrow.setDirection(_contactNormal);
-        arrow.setLength(length, length * 0.3, length * 0.15);
-        arrow.visible = true;
-        arrowIdx++;
+    withContacts(data, (contactArray) => {
+      for (let i = 0; i < Math.min(ncon, MAX_CONTACT_ARROWS); i++) {
+        const c = getContact(contactArray, i);
+        if (!c) break;
+        _contactPos.set(c.pos[0], c.pos[1], c.pos[2]);
+        _contactNormal.set(c.frame[0], c.frame[1], c.frame[2]);
+        const force = Math.abs(c.dist) * 100;
+        const length = Math.min(force * 0.01, 0.1);
+        if (length > 0.001 && arrowIdx < pool.length) {
+          const arrow = pool[arrowIdx];
+          arrow.position.copy(_contactPos);
+          arrow.setDirection(_contactNormal);
+          arrow.setLength(length, length * 0.3, length * 0.15);
+          arrow.visible = true;
+          arrowIdx++;
+        }
       }
-    }
+    });
 
     // Hide unused arrows
     for (let i = arrowIdx; i < pool.length; i++) {

package/src/components/FlexRenderer.tsx

@@ -39,7 +39,7 @@ export function FlexRenderer(props: Omit<ThreeElements['group'], 'ref'>) {
       const positions = new Float32Array(vertNum * 3);
       geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
 
-      // Note: flex_faceadr/flex_facenum/flex_face are NOT available in mujoco-js WASM.
+      // Note: flex_faceadr/flex_facenum/flex_face may not be available in all MuJoCo WASM builds.
       // Without face data we render as a point cloud. If future WASM versions expose
       // face arrays, index-based triangle rendering can be added here.
 

package/src/components/TendonRenderer.tsx

@@ -7,7 +7,7 @@
  * WASM fields used: model.ntendon, model.ten_wrapadr, model.ten_wrapnum
  * data.wrap_xpos, data.ten_wrapadr (runtime)
  *
- * Note: ten_rgba and ten_width are NOT available in mujoco-js 0.0.7.
+ * Note: ten_rgba and ten_width may not be available in all MuJoCo WASM builds.
  * Tendons use a default color and width.
  */
 

package/src/core/MujocoProvider.tsx

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import loadMujoco from 'mujoco-js';
+import loadMujoco from '@mujoco/mujoco';
+import defaultMujocoWasmUrl from '@mujoco/mujoco/mujoco.wasm?url';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { MujocoModule, MujocoContextValue } from '../types';
 
@@ -42,7 +43,7 @@ export function MujocoProvider({ wasmUrl, timeout = 30000, children, onError }:
     isMounted.current = true;
 
     const wasmPromise = loadMujoco({
-      ...(wasmUrl ? { locateFile: (path: string) => path.endsWith('.wasm') ? wasmUrl : path } : {}),
+      locateFile: (path: string) => path.endsWith('.wasm') ? (wasmUrl ?? defaultMujocoWasmUrl) : path,
       printErr: (text: string) => {
         if (text.includes('Aborted') && isMounted.current) {
           setError('Simulation crashed. Reload page.');

package/src/core/MujocoSimProvider.tsx

@@ -14,7 +14,7 @@ import {
   useState,
 } from 'react';
 import * as THREE from 'three';
-import { MujocoData, MujocoModel, MujocoModule, getContact } from '../types';
+import { MujocoData, MujocoModel, MujocoModule, getContact, withContacts } from '../types';
 import { SceneRenderer } from '../components/SceneRenderer';
 import {
   ActuatorInfo,
@@ -576,18 +576,20 @@ export function MujocoSimProvider({
     if (!model || !data) return [];
     const contacts: ContactInfo[] = [];
     const ncon = data.ncon;
-    for (let i = 0; i < ncon; i++) {
-      const c = getContact(data, i);
-      if (!c) break;
-      contacts.push({
-        geom1: c.geom1,
-        geom1Name: getName(model, model.name_geomadr[c.geom1]),
-        geom2: c.geom2,
-        geom2Name: getName(model, model.name_geomadr[c.geom2]),
-        pos: [c.pos[0], c.pos[1], c.pos[2]],
-        depth: c.dist,
-      });
-    }
+    withContacts(data, (contactArray) => {
+      for (let i = 0; i < ncon; i++) {
+        const c = getContact(contactArray, i);
+        if (!c) break;
+        contacts.push({
+          geom1: c.geom1,
+          geom1Name: getName(model, model.name_geomadr[c.geom1]),
+          geom2: c.geom2,
+          geom2Name: getName(model, model.name_geomadr[c.geom2]),
+          pos: [c.pos[0], c.pos[1], c.pos[2]],
+          depth: c.dist,
+        });
+      }
+    });
     return contacts;
   }, []);
 

package/src/core/SceneLoader.ts

@@ -153,6 +153,16 @@ interface LoadResult {
   mjData: MujocoData;
 }
 
+function loadModelFromPath(mujoco: MujocoModule, path: string): MujocoModel {
+  if (mujoco.MjModel.from_xml_path) {
+    return mujoco.MjModel.from_xml_path(path);
+  }
+  if (mujoco.MjModel.loadFromXML) {
+    return mujoco.MjModel.loadFromXML(path);
+  }
+  throw new Error('MuJoCo WASM module does not expose an XML path loader');
+}
+
 /**
  * Config-driven scene loader — replaces the old RobotLoader + patchSingleRobot approach.
  */
@@ -260,7 +270,7 @@ export async function loadScene(
 
   // 5. Load model
   onProgress?.('Loading model...');
-  const mjModel = mujoco.MjModel.loadFromXML(`/working/${config.sceneFile}`);
+  const mjModel = loadModelFromPath(mujoco, `/working/${config.sceneFile}`);
   const mjData = new mujoco.MjData(mjModel);
 
   // 6. Set initial pose — set both ctrl and qpos so robot starts at home.

package/src/hooks/useContacts.ts

@@ -9,7 +9,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { useMujocoContext, useAfterPhysicsStep } from '../core/MujocoSimProvider';
 import { findBodyByName, getName } from '../core/SceneLoader';
-import { getContact } from '../types';
+import { getContact, withContacts } from '../types';
 import type { Bodies, ContactInfo, MujocoModel } from '../types';
 
 // Cache geom names per model to avoid cross-model id collisions.
@@ -77,24 +77,26 @@ export function useContacts(
     const contacts: ContactInfo[] = [];
     const filterBody = bodyIdRef.current;
 
-    for (let i = 0; i < ncon; i++) {
-      const c = getContact(data, i);
-      if (!c) break;
-      // Filter by body if specified
-      if (filterBody >= 0) {
-        const b1 = model.geom_bodyid[c.geom1];
-        const b2 = model.geom_bodyid[c.geom2];
-        if (b1 !== filterBody && b2 !== filterBody) continue;
+    withContacts(data, (contactArray) => {
+      for (let i = 0; i < ncon; i++) {
+        const c = getContact(contactArray, i);
+        if (!c) break;
+        // Filter by body if specified
+        if (filterBody >= 0) {
+          const b1 = model.geom_bodyid[c.geom1];
+          const b2 = model.geom_bodyid[c.geom2];
+          if (b1 !== filterBody && b2 !== filterBody) continue;
+        }
+        contacts.push({
+          geom1: c.geom1,
+          geom1Name: getGeomNameCached(model, c.geom1),
+          geom2: c.geom2,
+          geom2Name: getGeomNameCached(model, c.geom2),
+          pos: [c.pos[0], c.pos[1], c.pos[2]],
+          depth: c.dist,
+        });
       }
-      contacts.push({
-        geom1: c.geom1,
-        geom1Name: getGeomNameCached(model, c.geom1),
-        geom2: c.geom2,
-        geom2Name: getGeomNameCached(model, c.geom2),
-        pos: [c.pos[0], c.pos[1], c.pos[2]],
-        depth: c.dist,
-      });
-    }
+    });
     contactsRef.current = contacts;
     callbackRef.current?.(contacts);
   });

package/src/rendering/GeomBuilder.ts

@@ -61,7 +61,7 @@ export class GeomBuilder {
         const MG = this.mujoco.mjtGeom; // Short alias for MuJoCo Geometry Types enum
         let geo: THREE.BufferGeometry | null = null;
 
-        // The '.value ?? MG.XYZ' pattern handles slightly different versions of the mujoco-js bindings.
+        // The '.value ?? MG.XYZ' pattern handles slightly different MuJoCo WASM binding versions.
         const getVal = (v: unknown) => (v as { value: number })?.value ?? v;
 
         if (type === getVal(MG.mjGEOM_PLANE)) {

package/src/types.ts

@@ -55,20 +55,33 @@ export interface MujocoContact {
  */
 export interface MujocoContactArray {
   get(i: number): MujocoContact | undefined;
+  delete?: () => void;
 }
 
 /**
- * Read a single contact from the WASM contact array.
+ * Read a single contact from an already-acquired WASM contact array.
  * Returns undefined if the access fails (WASM heap issue, bad index, etc.).
  */
-export function getContact(data: MujocoData, i: number): MujocoContact | undefined {
+export function getContact(contacts: MujocoContactArray, i: number): MujocoContact | undefined {
   try {
-    return data.contact.get(i);
+    return contacts.get(i);
   } catch {
     return undefined;
   }
 }
 
+/**
+ * Access the current contact vector and release the copied WASM handle afterwards.
+ */
+export function withContacts<T>(data: MujocoData, read: (contacts: MujocoContactArray) => T): T {
+  const contacts = data.contact;
+  try {
+    return read(contacts);
+  } finally {
+    contacts.delete?.();
+  }
+}
+
 /**
  * Minimal interface for MuJoCo Model to avoid 'any'.
  */
@@ -249,7 +262,12 @@ export interface MujocoData {
  * Minimal interface for the MuJoCo WASM Module.
  */
 export interface MujocoModule {
-  MjModel: { loadFromXML: (path: string) => MujocoModel; [key: string]: unknown };
+  MjModel: {
+    from_xml_path?: (path: string) => MujocoModel;
+    from_xml_string?: (xml: string, vfs?: unknown) => MujocoModel;
+    loadFromXML?: (path: string) => MujocoModel;
+    [key: string]: unknown;
+  };
   MjData: new (model: MujocoModel) => MujocoData;
   MjvOption: new () => { delete: () => void; [key: string]: unknown };
   mj_forward: (m: MujocoModel, d: MujocoData) => void;

package/src/wasm-url.d.ts

@@ -0,0 +1,4 @@
+declare module '*.wasm?url' {
+  const url: string;
+  export default url;
+}