three.js screen is broken when using orbitcontrol - three.js

Question

[broken scene][1]
[normal scene][2]
[1]: https://i.stack.imgur.com/plQ7w.png
[2]: https://i.stack.imgur.com/2i3Fy.jpg
I'm new to three.js
When I move the screen using OrbitControl, the screen is broken, how can I fix it?
https://threejs.org/examples/?q=water#webgl_shaders_ocean
I used the example above
How do I move it in the example state to proceed without breaking the screen on screen transition? Also, how do I set up the bbox?
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 150, 100, 200 );
sun = new THREE.Vector3();
// Water
const waterGeometry = new THREE.PlaneGeometry( 10000, 10000 );
water = new Water(
waterGeometry,
{
textureWidth: 512,
textureHeight: 512,
waterNormals: new THREE.TextureLoader().load( '../examples/textures/waternormals.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
} ),
sunDirection: new THREE.Vector3(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: 3.7,
fog: scene.fog !== undefined
}
);
water.rotation.x = - Math.PI / 2;
scene.add( water );
const sky = new Sky();
sky.scale.setScalar( 80000 );//Cube의 크기
scene.add( sky );
const skyUniforms = sky.material.uniforms;
skyUniforms[ 'turbidity' ].value = 20;//탁도 - 공기의 탁한 정도
skyUniforms[ 'rayleigh' ].value = 4;
skyUniforms[ 'mieCoefficient' ].value = 0.05;
skyUniforms[ 'mieDirectionalG' ].value = 0.5;
const pmremGenerator = new THREE.PMREMGenerator( renderer );
function updateSun() {
const phi = THREE.MathUtils.degToRad( 90 - parameters.elevation );
const theta = THREE.MathUtils.degToRad( parameters.azimuth );
sun.setFromSphericalCoords( 1, phi, theta );
sky.material.uniforms[ 'sunPosition' ].value.copy( sun );
water.material.uniforms[ 'sunDirection' ].value.copy( sun ).normalize();
scene.environment = pmremGenerator.fromScene( sky ).texture;
}
updateSun();
controls = new OrbitControls( camera, renderer.domElement );
const gui = new GUI();
const folderSky = gui.addFolder( 'Sky' );
folderSky.add( parameters, 'elevation', 0, 90, 0.1 ).onChange( updateSun );
folderSky.add( parameters, 'azimuth', - 180, 180, 0.1 ).onChange( updateSun );
folderSky.open();
const waterUniforms = water.material.uniforms;
const folderWater = gui.addFolder( 'Water' );
folderWater.add( waterUniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
folderWater.add( waterUniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
folderWater.open();
window.addEventListener( 'resize', onWindowResize );
}