viewHelper in Three js editor

Questions
,
1

Hello,

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

Thanks

2

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.)
3

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

4

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.

Edit:

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

1 Like