useSelectionHighlight

Hook for applying emissive highlights to body meshes

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

Parameter	Type	Default	Description
bodyId	number | null	—	ID of the body to highlight. Pass null to clear.
options.color	string	'#ff4444'	Emissive highlight color.
options.emissiveIntensity	number	0.3	Intensity 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

Related

• useBodyMeshes — the low-level primitive this hook is built on, for custom visuals and postprocessing