Creating an Eclipse Effect with Bloom in Three.js

The issue you're experiencing with your eclipse effect is related to how you're handling the render passes and layers in Three.js. When using the bloom effect with EffectComposer, you need to properly combine the bloom pass with the regular scene rendering.

The Problem

In your current implementation, you're rendering the scene normally first, then rendering only the bloom layer, but you're not combining these two renders properly. This is why you're seeing only the bloom effect with a black background.

Solution

You need to use a proper compositing workflow with EffectComposer. Here's how to fix your animation loop:

JAVASCRIPTCopied
function animate() {
  controls.update();
  mesh.rotation.x += .005;
  mesh.rotation.z += .005;
  par.rotation.y += .001;
  
  // 1. Render bloom scene
  scene.traverse(darkenNonBloomed); // Optional function to hide non-bloom objects
  bloomComposer.render();
  scene.traverse(restoreMaterial); // Optional function to restore materials
  
  // 2. Render final scene with regular + bloom
  finalComposer.render();
  
  requestAnimationFrame(animate);
}

You'll need to set up your composers differently:

JAVASCRIPTCopied
// Create the bloom composer
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // strength
  0.4, // radius
  0.85 // threshold
);

const renderScene = new RenderPass(scene, camera);

// Bloom composer - renders only the glowing parts
const bloomComposer = new EffectComposer(renderer);
bloomComposer.renderToScreen = false; // Important!
bloomComposer.addPass(renderScene);
bloomComposer.addPass(bloomPass);

// Final composer - combines everything
const finalComposer = new EffectComposer(renderer);
finalComposer.addPass(renderScene);

// Add a shader pass to combine the bloom with the original scene
const finalPass = new ShaderPass(
  new THREE.ShaderMaterial({
    uniforms: {
      baseTexture: { value: null },
      bloomTexture: { value: bloomComposer.renderTarget2.texture }
    },
    vertexShader: /* your vertex shader */,
    fragmentShader: /* your fragment shader */
  }),
  "baseTexture"
);
finalPass.needsSwap = true;
finalComposer.addPass(finalPass);

Layer Management

Instead of switching camera layers in your render loop, you should mark only the sun object for bloom:

JAVASCRIPTCopied
// Set up your sun mesh
sunMesh.layers.enable(BLOOM_LAYER);

// Helper functions for the bloom effect
function darkenNonBloomed(obj) {
  if (obj.isMesh && !obj.layers.test(bloomLayer)) {
    materials[obj.uuid] = obj.material;
    obj.material = darkMaterial;
  }
}

function restoreMaterial(obj) {
  if (materials[obj.uuid]) {
    obj.material = materials[obj.uuid];
    delete materials[obj.uuid];
  }
}

This approach will allow you to have the sun glow with bloom while keeping all other scene elements visible, including your stars background and the moon for the eclipse effect.

For a complete implementation, I recommend checking the official Three.js examples for bloom effects, particularly the selective bloom example which demonstrates this technique in detail.