0

I use Three.js for 2D presentation in an application, so I setup an Orthographic camera with MapControls. There are some objects added to the scene that could be 2d-panned and zoomed in/out. Apart from them I have an arrow object which must be static, i.e. excluded from pan and zoom. This arrow will have a special form and animated rotation and this is why I don't draw it with CSS.

I tried the guides from this SO post and succeeded to restrict the panning only. 

scene.add(camera);
...
camera.add(directionArrow);

But when using the mouse wheel to zoom in/out the arrow is also zoomed in/out.

Here is a jsfiddle with minimal reproduction.

The triangle (arrow) should stay still when zooming, just like it does when panning.

vasilv
  • 21
  • 1
  • 4

1 Answers1

1

Use a GUI layer and a Render layer.

If you draw the Pointer in the GUI layer you can change the Render Layer however you want without affecting the GUI layer.

Normally Three.js GUI layers are done with HTML.

Once you have this you will need to get the object's coordinates and update the HTML. This is the most complex part of the process so here is an article about doing this with some examples.

https://threejsfundamentals.org/threejs/lessons/threejs-align-html-elements-to-3d.html

Michael Warner
  • 3,879
  • 3
  • 21
  • 45
  • Yep, that is true, but I wanted to avoid using HTML and CSS for the pointer as it is already drawn and animated properly. Only the zooming hinders me. With this approach I will have to rework it all. – vasilv Jul 09 '19 at 07:27
  • The only thing I can think of is scaling the object in the opposite direction of the zoom. However, this is so hacky and would be very buggy that I would suggest reworking it and using HTML. There are many times we need to redo things and just do it right. It's painful but better. – Michael Warner Jul 09 '19 at 14:31
  • I have tried to scale the arrow but it changes the position and the scale also triggers on panning. It seems reworking is the only option left. Thank you. – vasilv Jul 10 '19 at 07:09