mujoco-react 4.0.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mujoco-react",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "description": "Composable React Three Fiber building blocks for MuJoCo WASM simulations",
   "type": "module",
   "main": "./dist/index.js",

package/src/core/SceneLoader.ts

@@ -154,9 +154,7 @@ export async function loadScene(
   try { mujoco.FS.unmount('/working'); } catch { /* ignore */ }
   try { mujoco.FS.mkdir('/working'); } catch { /* ignore */ }
 
-  const baseUrl =
-    config.baseUrl ||
-    `https://raw.githubusercontent.com/google-deepmind/mujoco_menagerie/main/${config.modelId}/`;
+  const baseUrl = config.src.endsWith('/') ? config.src : config.src + '/';
 
   const downloaded = new Set<string>();
   const queue: string[] = [config.sceneFile];

package/src/hooks/useBodyMeshes.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useBodyMeshes — returns Three.js meshes belonging to a MuJoCo body.
+ *
+ * Low-level primitive for custom selection visuals, outlines,
+ * postprocessing effects, or any per-body mesh manipulation.
+ */
+
+import { useMemo } from 'react';
+import { useThree } from '@react-three/fiber';
+import * as THREE from 'three';
+
+/**
+ * Returns all Three.js meshes belonging to the given MuJoCo body ID.
+ *
+ * @example
+ * ```tsx
+ * const meshes = useBodyMeshes(selectedBodyId);
+ *
+ * // Use with drei Outline
+ * <Outline selection={meshes} />
+ *
+ * // Or manipulate directly
+ * useFrame(() => {
+ *   meshes.forEach(m => { m.scale.setScalar(1.05); });
+ * });
+ * ```
+ */
+export function useBodyMeshes(bodyId: number | null): THREE.Mesh[] {
+  const { scene } = useThree();
+
+  return useMemo(() => {
+    if (bodyId === null || bodyId < 0) return [];
+
+    const meshes: THREE.Mesh[] = [];
+    scene.traverse((obj) => {
+      if (obj.userData.bodyID === bodyId && (obj as THREE.Mesh).isMesh) {
+        meshes.push(obj as THREE.Mesh);
+      }
+    });
+    return meshes;
+  }, [bodyId, scene]);
+}

package/src/hooks/useSelectionHighlight.ts

@@ -2,64 +2,58 @@
  * @license
  * SPDX-License-Identifier: Apache-2.0
  *
- * useSelectionHighlight — hook form of SelectionHighlight (spec 6.5)
+ * useSelectionHighlight — convenience hook for emissive body highlights.
  *
- * Applies emissive highlight to all meshes belonging to a body.
- * Restores original emissive when bodyId changes or hook unmounts.
+ * Built on useBodyMeshes. For custom visuals, use useBodyMeshes directly.
  */
 
 import { useEffect, useRef } from 'react';
-import { useThree } from '@react-three/fiber';
 import * as THREE from 'three';
+import { useBodyMeshes } from './useBodyMeshes';
 
 export function useSelectionHighlight(
   bodyId: number | null,
   options: { color?: string; emissiveIntensity?: number } = {},
 ) {
   const { color = '#ff4444', emissiveIntensity = 0.3 } = options;
-  const { scene } = useThree();
-  const prevMeshesRef = useRef<{ mesh: THREE.Mesh; originalEmissive: THREE.Color; originalIntensity: number }[]>([]);
+  const meshes = useBodyMeshes(bodyId);
+  const prevRef = useRef<{ mesh: THREE.Mesh; originalEmissive: THREE.Color; originalIntensity: number }[]>([]);
 
   useEffect(() => {
-    // Restore previous highlights
-    for (const entry of prevMeshesRef.current) {
+    // Restore previous
+    for (const entry of prevRef.current) {
       const mat = entry.mesh.material as THREE.MeshStandardMaterial;
       if (mat.emissive) {
         mat.emissive.copy(entry.originalEmissive);
         mat.emissiveIntensity = entry.originalIntensity;
       }
     }
-    prevMeshesRef.current = [];
+    prevRef.current = [];
 
-    if (bodyId === null || bodyId < 0) return;
-
-    // Find all meshes belonging to this body
+    // Apply new
     const highlightColor = new THREE.Color(color);
-    scene.traverse((obj) => {
-      if (obj.userData.bodyID === bodyId && (obj as THREE.Mesh).isMesh) {
-        const mesh = obj as THREE.Mesh;
-        const mat = mesh.material as THREE.MeshStandardMaterial;
-        if (mat.emissive) {
-          prevMeshesRef.current.push({
-            mesh,
-            originalEmissive: mat.emissive.clone(),
-            originalIntensity: mat.emissiveIntensity ?? 0,
-          });
-          mat.emissive.copy(highlightColor);
-          mat.emissiveIntensity = emissiveIntensity;
-        }
+    for (const mesh of meshes) {
+      const mat = mesh.material as THREE.MeshStandardMaterial;
+      if (mat.emissive) {
+        prevRef.current.push({
+          mesh,
+          originalEmissive: mat.emissive.clone(),
+          originalIntensity: mat.emissiveIntensity ?? 0,
+        });
+        mat.emissive.copy(highlightColor);
+        mat.emissiveIntensity = emissiveIntensity;
       }
-    });
+    }
 
     return () => {
-      for (const entry of prevMeshesRef.current) {
+      for (const entry of prevRef.current) {
         const mat = entry.mesh.material as THREE.MeshStandardMaterial;
         if (mat.emissive) {
           mat.emissive.copy(entry.originalEmissive);
           mat.emissiveIntensity = entry.originalIntensity;
         }
       }
-      prevMeshesRef.current = [];
+      prevRef.current = [];
     };
-  }, [bodyId, color, emissiveIntensity, scene]);
+  }, [meshes, color, emissiveIntensity]);
 }

package/src/index.ts

@@ -41,7 +41,6 @@ export { TendonRenderer } from './components/TendonRenderer';
 export { FlexRenderer } from './components/FlexRenderer';
 export { ContactListener } from './components/ContactListener';
 export { TrajectoryPlayer } from './components/TrajectoryPlayer';
-export { SelectionHighlight } from './components/SelectionHighlight';
 
 // Hooks
 export { useActuators } from './hooks/useActuators';
@@ -59,6 +58,7 @@ export { useTrajectoryRecorder } from './hooks/useTrajectoryRecorder';
 export { useGamepad } from './hooks/useGamepad';
 export { useVideoRecorder } from './hooks/useVideoRecorder';
 export { useCtrlNoise } from './hooks/useCtrlNoise';
+export { useBodyMeshes } from './hooks/useBodyMeshes';
 export { useSelectionHighlight } from './hooks/useSelectionHighlight';
 export { useSceneLights } from './hooks/useSceneLights';
 export { useCameraAnimation } from './hooks/useCameraAnimation';
@@ -106,7 +106,6 @@ export type {
   DebugProps,
   SceneLightsProps,
   TrajectoryPlayerProps,
-  SelectionHighlightProps,
   ContactListenerProps,
   // API
   MujocoSimAPI,

package/src/types.ts

@@ -284,9 +284,10 @@ export interface XmlPatch {
 }
 
 export interface SceneConfig {
-  modelId: string;
+  /** Base URL for fetching model files. The loader fetches `src + sceneFile` and follows dependencies. */
+  src: string;
+  /** Entry MJCF XML file name, e.g. 'scene.xml'. */
   sceneFile: string;
-  baseUrl?: string;
   sceneObjects?: SceneObject[];
   homeJoints?: number[];
   xmlPatches?: XmlPatch[];