glodrei
Version:
useful add-ons for react-three-fiber
26 lines (20 loc) • 1.04 kB
text/mdx
title: GizmoHelper
sourcecode: src/core/GizmoHelper.tsx
[](https://drei.pmnd.rs/?path=/story/gizmos-gizmohelper--gizmo-helper-story)
Used by widgets that visualize and control camera position.
Two example gizmos are included: GizmoViewport and GizmoViewcube, and `useGizmoContext` makes it easy to create your own.
Make sure to set the `makeDefault` prop on your controls, in that case you do not have to define the onTarget and onUpdate props.
```jsx
<GizmoHelper
alignment="bottom-right" // widget alignment within scene
margin={[80, 80]} // widget margins (X, Y)
onUpdate={/* called during camera animation */}
onTarget={/* return current camera target (e.g. from orbit controls) to center animation */}
renderPriority={/* use renderPriority to prevent the helper from disappearing if there is another useFrame(..., 1)*/}
>
<GizmoViewport axisColors={['red', 'green', 'blue']} labelColor="black" />
{/* alternative: <GizmoViewcube /> */}
</GizmoHelper>
```