In my application, I utilize Three.js for creating a 2D presentation. To achieve this, I set up an Orthographic camera with MapControls. Within the scene, there are various objects that can be panned and zoomed in and out in a 2D space. However, there is one specific object - an arrow with unique shape and animated rotation - that needs to remain static, meaning it should not be affected by panning or zooming. Due to its dynamic nature, drawing this arrow using CSS is not a viable option.
Following the guidance provided in this StackOverflow post, I was able to successfully restrict panning but encountered issues with zooming.
scene.add(camera);
...
camera.add(directionArrow);
Despite my efforts, when zooming in or out using the mouse wheel, the arrow also gets magnified along with the rest of the scene.
To demonstrate this issue further, I have created a jsfiddle showcasing a minimal reproduction of the problem.
The main goal is to keep the triangle (arrow) stationary during zooming, similar to how it functions during panning operations.