mujoco-react 5.0.0 → 6.0.1

package/package.json

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

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,