feat: never render off screen

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -17,6 +17,7 @@ import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawL
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
+import useOnScreen from '../../../../../../hooks/useOnScreen';
 import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
 import * as Duel from '../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
@@ -45,6 +46,9 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
       tankModelDefinition.turrets[protagonist.turret.id];
     const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
     const display = TankopediaPersistent.use((state) => state.display);
+    const onScreen = useOnScreen(canvas);
+
+    console.log(onScreen);
 
     useImperativeHandle(ref, () => canvas.current!, []);
 
@@ -155,7 +159,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
 
     return (
       <Canvas
-        frameloop="demand"
+        frameloop={onScreen ? 'demand' : 'never'}
         gl={{
           clippingPlanes: Object.freeze([]),
           localClippingEnabled: true,