I am trying to use orbit control to zoom in and out my object, I included the orbit control file from GitHub in my file but when I input those commented-out lines the entire page went blank.

 //scene
    const scene = new THREE.Scene();
 //camera
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    //renderer
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    

    const geometry = new THREE.SphereGeometry(10,10,10)
    const material = new THREE.MeshNormalMaterial({wireframe:true})
    const sphere = new THREE.Mesh(geometry,material)
    scene.add(sphere)

    const geometry2 = new THREE.SphereGeometry(10,10,10)
    const material2 = new THREE.MeshNormalMaterial({wireframe:true})
    const sphere2 = new THREE.Mesh(geometry2,material2)
    sphere2.position.x = 40
    scene.add(sphere2)

    const geometry3 = new THREE.SphereGeometry(10,10,10)
    const material3 = new THREE.MeshNormalMaterial({wireframe:true})
    const sphere3 = new THREE.Mesh(geometry3,material3)
    sphere3.position.x = -40
    scene.add(sphere3)

    camera.position.z = 70        

    //controls = new THREE.OrbitControls(camera,renderer.domElement)
   //controls.minDistance =1
    //controls.maxDistance =1000


    const animate = () => {
        requestAnimationFrame(animate)
        
        sphere.rotation.x += 0.02
        sphere.rotation.y += 0.02

        sphere2.rotation.x += 0.02
        sphere2.rotation.y += 0.02

        sphere3.rotation.x += 0.02
        sphere3.rotation.y += 0.02
        //controls.update()

        renderer.render(scene,camera)

    }

    animate()