viewHelper in Three js editor


I am implementing viewHelper(Navigation Arrow - bottom-right of threejs editor) in my canvas and following code of Threejs Editor

How are you rendering viewHelper in scene at static position(bottom-right).

in my case it is zooming in and zooming out along with canvas

Are you using different Scene or different camera or raycaster?

Please give me high level idea


There are quite a few ways. And it also depends on how you want the view helper to look.

  1. If your view helper is 2D, or you render it to 2D texture - you can use an orthographic camera with depth testing turned off - that’s probably the most popular for creating any UI elements (like in this or this example.)
  2. You can create a separate canvas DOM element, position it absolutely on the screen - then do something similar to point 1, just render the view helper to the separate canvas.
  3. If your view helper is 3D, you’d like to render 2D texture on a 3D plane, or you’re just feeling adventurous - you can simply add the viewer directly to the scene and turn off depth testing. Positioning it in a proper location is a matter of doing some calculations, rotation along the camera is just viewer.quaternion.copy(camera.quaterion). (in the end you’d get something like this.)

Thank you for your attention @mjurczyk

In point 1 -

when I zoom in or out this side view also getting affected.
I want this side view could be rotated BUT NOT zoom in or out same as in three js editor.

Thank you

Hm, it should work just fine if you’re rendering the helper in a separate ortho camera.

I can take a look when I’m back at home.


Can you please share your code with 2 cameras? May be easier to see why it’s not working as expected.