use fitToSphereto fit a high palce sphere then can not zoom to low place

[MySongStan]

Describe the bug

Because the sphere's radius has been modified and is relatively small, and the target has also been modified, when scaling down, the radius will continue to decrease proportionally, but it can never shrink to below the position of the sphere's center. How should I modify it to achieve the effect I want? I just want to reposition it without affecting the overall scaling operation.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. See error

Code

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import CameraControls from './dist/camera-controls.module.js';

CameraControls.install( { THREE: THREE } );

const width = window.innerWidth;
const height = window.innerHeight;
const clock = new THREE.Clock();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
camera.position.set( 0, 0, 5 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild( renderer.domElement );

const cameraControls = new CameraControls( camera, renderer.domElement );
cameraControls.dollyToCursor=true
new THREE.TextureLoader().load( './env.jpg', ( equirectangularMap ) => {

	const pmremGenerator = new THREE.PMREMGenerator( renderer );
	pmremGenerator.compileEquirectangularShader();
	const envMapRenderTarget = pmremGenerator.fromEquirectangular( equirectangularMap );
	envMapRenderTarget.texture.encoding = THREE.sRGBEncoding;
	equirectangularMap.dispose();

	scene.environment = envMapRenderTarget.texture;

} );

const gridHelper = new THREE.GridHelper( 50, 50 );
scene.add( gridHelper );

new GLTFLoader().load( './rubber-duck.glb', ( gltf ) => {
	gltf.scene.position.setY(30)
	const boundingSphere = CameraControls.createBoundingSphere( gltf.scene );
	const sphereHelper = new THREE.Mesh(
		new THREE.SphereGeometry( boundingSphere.radius, 16, 16 ),
		new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } )
	);
	sphereHelper.position.copy( boundingSphere.center );
	sphereHelper.position.y+=30

	scene.add( gltf.scene );
	scene.add( sphereHelper );

	window.fit = () => {

		cameraControls.fitToSphere( gltf.scene, true );

	}

	renderer.render( scene, camera );

} );

renderer.render( scene, camera );

( function anim () {

	const delta = clock.getDelta();
	const elapsed = clock.getElapsedTime();
	const updated = cameraControls.update( delta );

	// if ( elapsed > 30 ) { return; }

	requestAnimationFrame( anim );

	if ( updated ) {

		renderer.render( scene, camera );
		console.log( 'rendered' );

	}

} )();

// make variable available to browser console
globalThis.cameraControls = cameraControls;

Live example

No response

Expected behavior

I just want to reposition it without affecting the overall scaling operation

Screenshots or Video

No response

Device

No response

OS

No response

Browser

No response