I want to add ViewHelper to my project (react + typescript), how can I do it?


Is there a separate ViewHelper?

I don’t want to import all ‘three.js/editor/js’.

There is no separate view helper but it should not be too hard to extract the relevant code from the editor.

The following PR might also be interesting in this context:

1 Like

i assume you are using react-three-fiber? if you’re not, and you use react i would really suggest that you do. there’s a sizeable community that shares self-contained components for react and three, many of them here. there are ready-made gizmo controls in there as well: Basic demo (forked) - CodeSandbox

they can be composed and shaped any way you want. for instance mixing a viewcube with orientation axes. they also work with all threejs controls (orbit, trackball, airplane, …), which is the harder part to get right bc controls normally would override changes to the camera.

<GizmoHelper alignment="bottom-right" margin={[80, 80]} onTarget={() => controls.current.target}>
  <GizmoViewport disabled hideNegativeAxes scale={35} position={[-40, -40, -40]} />
  <GizmoViewcube opacity={0.85} />


Thanks for the pointer! :blush: