# viewHelper in Three js editor

**URL:** <https://discourse.threejs.org/t/viewhelper-in-three-js-editor/20347>\
**Category:** Questions\
**Tags:** view-helper, webgl-renderer\
**Created:** [November 2, 2020, 6:21am UTC](https://discourse.threejs.org/t/viewhelper-in-three-js-editor/20347 "2020-11-02T06:21:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![shubham\_soni](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shubham_soni/32/12102_2.png) [@shubham\_soni](https://discourse.threejs.org/u/shubham_soni)\
**Post date:** [November 2, 2020, 6:21am UTC](https://discourse.threejs.org/t/viewhelper-in-three-js-editor/20347/1 "2020-11-02T06:21:20Z")

</div>

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**

> <https://github.com/mrdoob/three.js/blob/a4f71beffdbd18b471f736e7eb1e1f48c626fd79/editor/js/Viewport.ViewHelper.js>

Thanks

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 2, 2020, 6:50am UTC](https://discourse.threejs.org/t/viewhelper-in-three-js-editor/20347/2 "2020-11-02T06:50:57Z")

</div>

> [@shubham\_soni](#):
>
> How are you rendering viewHelper in scene at static position(bottom-right).

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](https://threejs.org/examples/?q=fat#webgl_lines_fat) or [this example](https://threejs.org/examples/?q=ren#webgl_framebuffer_texture).)
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](https://threejs.org/docs/index.html#api/en/materials/Material.depthTest). Positioning it in a proper location is a matter of [doing some calculations](https://discourse.threejs.org/t/three-js-screen-width/20302), rotation along the camera is just `viewer.quaternion.copy(camera.quaterion)`. (in the end you’d get something [like this](https://codepen.io/mjurczyk/pen/bGevQxP).)

---

<div class="post-metadata">

**Author:** ![shubham\_soni](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shubham_soni/32/12102_2.png) [@shubham\_soni](https://discourse.threejs.org/u/shubham_soni)\
**Post date:** [November 2, 2020, 11:06am UTC](https://discourse.threejs.org/t/viewhelper-in-three-js-editor/20347/3 "2020-11-02T11:06:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 2, 2020, 11:49am UTC](https://discourse.threejs.org/t/viewhelper-in-three-js-editor/20347/4 "2020-11-02T11:49:53Z")

</div>

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:

> [@shubham\_soni](#):
>
> when I zoom in or out this side view also getting affected.

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