drei
drei copied to clipboard
GizmoHelper / GizmoViewport don't work when matrix auto updates are off
-
three
version: 0.149.0 -
@react-three/fiber
version: 8.10.4 -
@react-three/drei
version: 9.56.18 -
node
version: v18.16.0 -
npm
(oryarn
) version: 9.5.1
Problem description:
We have to turn off matrix auto update globally for performance reasons. Apparently, this breaks the behavior of the mentioned components and no axes appear on the screen. It works fine if matrix auto updates are enabled in the same code.
Relevant code:
Object3D.DEFAULT_MATRIX_AUTO_UPDATE = false;
Object3D.DEFAULT_MATRIX_WORLD_AUTO_UPDATE = false;
// ....
export function MyAxesIndicator() {
return (
<GizmoHelper
alignment="bottom-right"
margin={[60, 60]}
>
<GizmoViewport
disabled
axisColors={["red", "lime", "#00FFFF"]}
hideNegativeAxes
labels={["N", "E", "D"]}
labelColor="black"
/>
</GizmoHelper>);
}
Suggested solution:
It may be a simple matter of explicitly forcing matrixAutoUpdate and/or matrixWorldAutoUpdate to true for the objects that need it, or explicitly updating the matrices in an useFrame() internal to the gizmo components.