I want to create a sun surrounded with a large ring or orbit in three.js. Here is my source code (using require.js modules):

require(['js/interactive.js', 'js/OrbitControls.js', 'js/three.min.js'], function (InteractionManager, OrbitControls, THREE) {
    const ZOOM = 300;

    const scene = new THREE.Scene();
    const camera = new THREE.OrthographicCamera(window.innerWidth / -ZOOM, window.innerWidth / ZOOM, window.innerHeight / ZOOM, window.innerHeight / - ZOOM, 1, 1000);

    const renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    // renderer.setClearColorHex( 0x555555, 1 );
    document.body.appendChild(renderer.domElement);


    // new a interaction, then you can add interaction-event with your free style
    const interaction = new InteractionManager(renderer, camera, renderer.domElement);
    const loader = new THREE.TextureLoader();
    const controls = new OrbitControls(camera, renderer.domElement);

    const light = new THREE.AmbientLight(0xffffff); // soft white light
    scene.add(light);

    // const light2 = new THREE.PointLight(0xffffff); // soft white light
    // light2.position.set(10, 0, 0);
    // scene.add(light2);

    const geometry = new THREE.SphereGeometry(1, 32, 32);
    const material = new THREE.MeshPhongMaterial({
        map: loader.load('./resources/2k_sun.jpeg'),
        specular: 0x555555,
        shininess: 50
    });

    const sun = new THREE.Mesh(geometry, material);
    scene.add(sun);
    interaction.add(sun);

    sun.addEventListener('click', function(ev) {
        var bb = new THREE.Box3()
        bb.setFromObject(sun);
        bb.getCenter(controls.target);

        camera.zoom = 1;
        camera.updateProjectionMatrix();
    });

    const ringGeometry = new THREE.RingGeometry(50, 51, 32);
    const ringMaterial = new THREE.MeshBasicMaterial( { color: 0x808080, side: THREE.DoubleSide } );
    const ring = new THREE.Mesh( ringGeometry, ringMaterial );
    scene.add( ring );

    camera.position.set(0, 0, 5);
    controls.update();

    const animate = function () {
        requestAnimationFrame(animate);

        sun.rotation.x += 0.01;
        sun.rotation.y += 0.01;

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.render(scene, camera);
    };

    animate();
})

interactive.js is an interaction library I downloaded from here. I used it to zoom in on the sun when it's clicked.

However, when I run this code, parts of the ring will not render at certain angles. This is only fixed if I make the ring much smaller. Below is a screenshot of this behavior:

My question: How can I make this ring fully visible at any angle and maintain the large size?