Transform Controls mouse controls offset when render on useFrame

Questions
, , ,
1

TransformControls on my scene normally works but after I render camera on useFrame hook, TransformControls gizmos become offsetted as you can see in the video. All mouse clicks are offseted.

   useFrame(({camera, gl, scene}) => {
   	   gl.autoClear = false;

       // Render main camera
       gl.setViewport(0, 0, window.innerWidth, window.innerHeight);

       gl.setScissor(0, 0, window.innerWidth, window.innerHeight);
       gl.setScissorTest(true);

   	   gl.clear(true, true, true);

   	   gl.render(scene, camera);

   })

if I comment this out and let r3f render the scene everything is working fine. I thought that maybe I am not updating projection matrix or something like that but couldn’t figure it out.

2

Setting window.innerWidth, window.innerHeight was a wrong. When I calculate real canvas size and set it to setViewport it is fixed. Solution is setting real canvas size to viewport.