You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
useBodyMeshes(bodyId) returns Three.js meshes for a MuJoCo body —
the low-level primitive for custom selection visuals, outlines, or
postprocessing effects.
useSelectionHighlight is now built on useBodyMeshes.
SelectionHighlight component removed from public API.
BREAKING CHANGE: <SelectionHighlight> component is removed.
Use useSelectionHighlight(bodyId) hook or useBodyMeshes(bodyId)
for custom visuals.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy file name to clipboardExpand all lines: docs/guides/click-to-select.mdx
+35-20Lines changed: 35 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,17 @@ description: "Implement body selection with raycasting and highlights"
4
4
icon: "mouse-pointer"
5
5
---
6
6
7
-
A common interaction pattern: double-click a body to select it, highlight the selected body, and use the selection for further actions. This combines R3F raycasting with the library's `<SelectionHighlight />` component.
7
+
A common interaction pattern: double-click a body to select it, highlight the selected body, and use the selection for further actions. This combines R3F raycasting with the library's `useSelectionHighlight` hook.
8
8
9
9
## The Pattern
10
10
11
11
1. A hook listens for double-clicks and raycasts to find the clicked body
12
-
2.A component passes the selected body ID to `<SelectionHighlight />`
12
+
2.The `useSelectionHighlight` hook applies a visual highlight to the selected body
console.log(`Selected body ${name} (id: ${bodyId})`);
92
+
setSelectedBodyId(bodyId);
93
+
}}
94
+
>
95
+
<SelectionHandlerbodyId={selectedBodyId} />
96
+
</MujocoCanvas>
97
+
);
98
+
}
86
99
```
87
100
88
101
## How SceneRenderer Stores Body IDs
89
102
90
-
`<SceneRenderer />` sets `userData.bodyID` on every mesh it creates. When raycasting, walk up the object tree with `obj.parent` until you find a node with `userData.bodyID` — child meshes (e.g. geom sub-meshes) don't have it directly, but their parent body group does.
103
+
`<SceneRenderer />` sets `userData.bodyID` on every mesh it creates. When raycasting, walk up the object tree with `obj.parent` until you find a node with `userData.bodyID` -- child meshes (e.g. geom sub-meshes) don't have it directly, but their parent body group does.
104
+
105
+
## useSelectionHighlight Options
91
106
92
-
## SelectionHighlight Props
107
+
| Option | Type | Default | Description |
108
+
|--------|------|---------|-------------|
109
+
|`bodyId` (first argument) |`number \| null`| -- | Body to highlight, or `null` to clear |
110
+
|`options.color`|`string`|`'#ff4444'`| Emissive highlight color |
111
+
|`options.emissiveIntensity`|`number`|`0.3`| Strength of the emissive glow |
93
112
94
-
| Prop | Type | Default | Description |
95
-
|------|------|---------|-------------|
96
-
|`bodyId`|`number \| null`| — | Body to highlight, or `null` to clear |
97
-
|`color`|`string`|`'#ff4444'`| Emissive highlight color |
98
-
|`emissiveIntensity`|`number`|`0.3`| Strength of the emissive glow |
113
+
For more advanced selection visuals (outlines, postprocessing, custom shaders), use [`useBodyMeshes`](/hooks/use-body-meshes) to get direct access to the body's Three.js meshes.
description: "Hook that returns Three.js meshes for a MuJoCo body"
4
+
icon: "cubes"
5
+
---
6
+
7
+
Returns the `THREE.Mesh[]` array for a given MuJoCo body ID. This is the low-level primitive for building custom selection visuals, outlines, postprocessing effects, or any logic that needs direct access to the meshes belonging to a body.
8
+
9
+
## Signature
10
+
11
+
```tsx
12
+
useBodyMeshes(bodyId: number|null): THREE.Mesh[]
13
+
```
14
+
15
+
## Usage
16
+
17
+
```tsx
18
+
import { useBodyMeshes } from'mujoco-react';
19
+
20
+
function CustomOutline({ bodyId }: { bodyId:number|null }) {
21
+
const meshes =useBodyMeshes(bodyId);
22
+
23
+
useEffect(() => {
24
+
// Apply a custom outline effect to each mesh
25
+
meshes.forEach((mesh) => {
26
+
mesh.layers.enable(1); // e.g. assign to an outline layer
27
+
});
28
+
return () => {
29
+
meshes.forEach((mesh) => {
30
+
mesh.layers.disable(1);
31
+
});
32
+
};
33
+
}, [meshes]);
34
+
35
+
returnnull;
36
+
}
37
+
```
38
+
39
+
### Custom Selection Visuals
40
+
41
+
Because `useBodyMeshes` gives you raw mesh references, you can implement any visual effect:
42
+
43
+
```tsx
44
+
import { useBodyMeshes } from'mujoco-react';
45
+
import { useFrame } from'@react-three/fiber';
46
+
47
+
function PulsingHighlight({ bodyId }: { bodyId:number }) {
function OutlineSelectedBody({ bodyId }: { bodyId:number|null }) {
72
+
const meshes =useBodyMeshes(bodyId);
73
+
74
+
return (
75
+
<Selection>
76
+
<EffectComposer>
77
+
<OutlinebluredgeStrength={3} />
78
+
</EffectComposer>
79
+
{meshes.map((mesh, i) => (
80
+
<Selectkey={i}enabled>
81
+
<primitiveobject={mesh} />
82
+
</Select>
83
+
))}
84
+
</Selection>
85
+
);
86
+
}
87
+
```
88
+
89
+
## Parameters
90
+
91
+
| Parameter | Type | Default | Description |
92
+
|-----------|------|---------|-------------|
93
+
|`bodyId`|`number \| null`| -- | ID of the MuJoCo body. Pass `null` to get an empty array. |
94
+
95
+
## Returns
96
+
97
+
| Type | Description |
98
+
|------|-------------|
99
+
|`THREE.Mesh[]`| Array of Three.js meshes belonging to the body. Empty array if `bodyId` is `null` or no meshes are found. |
100
+
101
+
## How It Works
102
+
103
+
Traverses the R3F scene graph and collects all meshes whose `userData.bodyID` matches the given `bodyId`. The `<SceneRenderer>` component sets `userData.bodyID` on every mesh it creates, so this hook works with any standard mujoco-react scene.
104
+
105
+
## Related
106
+
107
+
-[`useSelectionHighlight`](/hooks/use-selection-highlight) -- convenience hook built on `useBodyMeshes` for emissive highlights
Copy file name to clipboardExpand all lines: docs/hooks/use-selection-highlight.mdx
+6-7Lines changed: 6 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ description: "Hook for applying emissive highlights to body meshes"
4
4
icon: "highlighter"
5
5
---
6
6
7
-
Applies an emissive glow to the meshes of a selected body. Hook form of [`<SelectionHighlight>`](/components/selection-highlight) for imperative usage inside your own components.
7
+
Applies an emissive glow to the meshes of a selected body. This is a convenience hook built on top of [`useBodyMeshes`](/hooks/use-body-meshes) -- if you need more control over how meshes are styled, use `useBodyMeshes` directly.
8
8
9
9
## Signature
10
10
@@ -38,7 +38,7 @@ function MyInteractiveScene() {
38
38
39
39
### Composing with Other Logic
40
40
41
-
The hook form is useful when you want to combine highlighting with other behavior in a single component:
41
+
The hook is useful when you want to combine highlighting with other behavior in a single component:
42
42
43
43
```tsx
44
44
function BodyInspector({ bodyId }: { bodyId:number }) {
@@ -58,17 +58,16 @@ function BodyInspector({ bodyId }: { bodyId: number }) {
58
58
59
59
| Parameter | Type | Default | Description |
60
60
|-----------|------|---------|-------------|
61
-
|`bodyId`|`number \| null`|—| ID of the body to highlight. Pass `null` to clear. |
61
+
|`bodyId`|`number \| null`|--| ID of the body to highlight. Pass `null` to clear. |
0 commit comments