Skip to main content
Applies an emissive glow to the meshes of a selected body. This is a convenience hook built on top of useBodyMeshes — if you need more control over how meshes are styled, use useBodyMeshes directly.

​
Signature

useSelectionHighlight(
  bodyId: number | null,
  options?: {
    color?: string;
    emissiveIntensity?: number;
  }
): void

​
Usage

import { useSelectionHighlight } from "mujoco-react";

function MyInteractiveScene() {
  const [selectedBody, setSelectedBody] = useState<number | null>(null);

  useSelectionHighlight(selectedBody, {
    color: "#00ff00",
    emissiveIntensity: 0.5,
  });

  // ... your click handling logic to set selectedBody
  return <mesh />;
}

​
Composing with Other Logic

The hook is useful when you want to combine highlighting with other behavior in a single component: 
function BodyInspector({ bodyId }: { bodyId: number }) {
  useSelectionHighlight(bodyId);
  const { position, quaternion } = useBodyState(bodyName);

  useFrame(() => {
    // Log position of highlighted body
    console.log(position.current);
  });

  return null;
}

​
Parameters

ParameterTypeDefaultDescription
bodyIdnumber | null—ID of the body to highlight. Pass null to clear.
options.colorstring'#ff4444'Emissive highlight color.
options.emissiveIntensitynumber0.3Intensity of the emissive glow.

​
How It Works

  1. Uses useBodyMeshes to get the meshes for the given body ID
  2. Sets the mesh material’s emissive color and emissiveIntensity
  3. Restores original emissive values when bodyId changes or the component unmounts
  • useBodyMeshes — the low-level primitive this hook is built on, for custom visuals and postprocessing