How to Zoom objects in the scene and not Gizmo (as in 3DS Max) in Three.js?

Question

JavaScript

Gizmo is a control that binds to a specific reference point on an object. For Gizmo you can drag, rotate and scale an object (direct analogy with 3DSM, Maya and the like)
There are two scenes on one there are objects (cubes, balls ...) on the other Gizmo objects (more precisely, one more and is not required).
How to make objects in both scenes behave as usual when changing the position (transfer, rotation, Zoom...) of the camera, with the only difference that the approach and removal of the camera did not affect the objects of the second scene, i.e. Gizmo objects ?
In other words, so that the Gizmo doesn't Scale or Zoom
--------------------

updateWorld: function(){

        this.orbitCameraControl.update(); // обновляем контроллер камеры(OrbitControls.js)

        this.renderer.clear();
        this.renderer.render(this.sceneObject, this.camera); // рендерим сцену с объектами
        this.renderer.clear(false, true, false); 
        this.renderer.render(this.sceneGizmo, this.camera);  // рендерим сцену с Gizmo
    }

In the second picture, you can see that as the camera zooms in, the size of the objects in both scenes changes. Everything is correct, but I need the size of Gizmo (2nd scene) to not change when zooming.

Answer 1

Helped with solving the problem - @trushka
solution from @trushka :
do the same with one camera and bare Gizmo depending on the distance to it. Well, let's say
var base=1000 is the distance to the camera at which Gizmo does not grin.
Then when the camera moves, if s is the distance to the viewpoint:
Gizmo.scale.x=Gizmo.scale.y=Gizmo.scale.z=s/ base;

var v1 = this.camera.position.clone();
    var v2 = Gizmo.position.clone();
    var len  = v1.sub(v2).length();
        
    var v = new THREE.Vector3(1,1,1);
    v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
    Gizmo.applyMatrix(obj.mLocal.clone().scale(v));

.....
after some time, the understanding came that this code does not work somewhat correctly
, since at a great distance they began to pour out bugs , chips , artifacts of an unknown nature, I honestly did not want to understand them. After collecting information from other resources, it became clear how to solve this issue.
actual code:

var cameraPos = this.world.camera.position.clone();
var gizmoPos = E.select.mLocal.getPosition().clone();
cameraPos.sub( ( cameraPos.clone().sub( gizmoPos ) ).normalize().multiplyScalar( 1000 ) );

I will comment a little, we find the direction of the camera on Gizmo
like this: we
increase the result by 1000 times
like this:
and subtract the result from the camera position.
the essence of the method lies in the banal holding of the camera at an equal distance (1000) from the camera.
I have everything, thanks for the help.

Answer 2

So you need to do two cameras, initially with the same coordinates, then initialize your OrbitControl for each, then set noZoom=true for the one that controls the 2nd camera, and then render each scene with its own camera
like:

control1= new THREE.OrbitControls( camera1 );
control2 = new THREE.OrbitControls( camera2);
control2.noZoom=true;
....................................
updateWorld: function(){

       control1.update();  control2.update(); // обновляем контроллеры камер(OrbitControls.js)

        this.renderer.clear();
        this.renderer.render(this.sceneObject, this.camera1); // рендерим сцену с объектами
        this.renderer.clear(false, true, false); 
        this.renderer.render(this.sceneGizmo, this.camera2);  // рендерим сцену с Gizmo
    }

In theory, it should work)))

Answer 3

@trushka , everything seems to be well selected
object, Gizmo appears:
doing Zoom, everything is fine:
but now when moving the viewpoint there are distortions:
distortions also occur when zooming from certain camera positions:
it didn’t work (((maybe I did something wrong?
did it like this:

var v1 = this.camera.position.clone();
  var v2 = this.orbitControl.target.clone();
  var len  = v1.sub(v2).length();
    
  var v = new THREE.Vector3(1,1,1);
  v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
  Gizmo.applyMatrix(obj.mLocal.clone().scale(v));