How to keep a sphere geometry a constant size while zooming with an orthographic camera and OrbitControls in Three.js?

I’m working on a project where I want to keep a SphereGeometry object within a mesh a constant size as I zoom in and out using an orthographic camera and orbit controls without moving the mesh to a separate scene. I’m running into an issue where the camera zoom scale is not inversely proportional (1:1) with the scaling factor of the sphere/mesh.

Is there a more accurate way to calculate the scaling factor for the sphere so it remains visually constant in size as zoom changes? Or is there a different approach I can take to solve this?

Any ideas or insights would be greatly appreciated.

ie: This is basically I want to achieve but I need it to be done with an orthographic camera, three.js ~ example ~ Mr.doob - JSFiddle - Code Playground

Unfortunately I am unable to reproduce the situation that you describe. The following code keeps the size of the blue circle the same, while the red’s size changes according to the zoom factor.

blue.scale.setScalar( 1/zoom );
camera.zoom = zoom;

2 Likes