Quiero crear un sol rodeado de un gran anillo u órbita en tres.js. Aquí está mi código fuente (usando módulos require.js):

 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 es una biblioteca de interacción que descargué de aquí . Lo usé para acercar el sol cuando se hace clic.

Sin embargo, cuando ejecuto este código, partes del anillo no se renderizarán en ciertos ángulos. Esto solo se soluciona si hago el anillo mucho más pequeño. A continuación se muestra una captura de pantalla de este comportamiento:

Mi pregunta: ¿Cómo puedo hacer que este anillo sea completamente visible desde cualquier ángulo y mantener el tamaño grande?