0
votes

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.

1

1 Answers

1
votes

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