Troubleshooting Post-Processing Effects in Three.js

Based on your issue with the EffectComposer and UnrealBloomPass, there are several potential problems that could be causing your screen to turn completely white:

Common Issues with Post-Processing

1. Incorrect Import Paths: The way you're importing the post-processing modules might be causing issues. Instead of using separate script tags, you should import the EffectComposer as well:

HTMLCopied
<script src="https://cdn.jsdelivr.net/npm/three/examples/jsm/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/jsm/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/jsm/postprocessing/UnrealBloomPass.js"></script>

2. Namespace Issues: When using the CDN imports, the classes aren't directly available under the THREE namespace. You need to use their full namespace:

JAVASCRIPTCopied
const composer = new THREE.EffectComposer.EffectComposer(renderer);
const renderPass = new THREE.RenderPass.RenderPass(scene, camera);
composer.addPass(renderPass);

const bloomPass = new THREE.UnrealBloomPass.UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    0.2, // Strength of the bloom
    0.2, // Radius
    0.35 // Threshold
);
composer.addPass(bloomPass);

3. Animation Loop: Make sure you're using the composer to render in your animation loop instead of the renderer:

JAVASCRIPTCopied
function animate() {
    requestAnimationFrame(animate);
    
    // Update your scene here
    
    // Use composer instead of renderer.render()
    composer.render();
}
animate();

4. Renderer Configuration: Ensure your renderer is properly configured for post-processing:

JAVASCRIPTCopied
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding; // or THREE.LinearEncoding depending on your needs

5. Selective Bloom: If you want to apply bloom to specific objects only, you'll need to use the selective bloom technique with render targets and layers:

JAVASCRIPTCopied
// Set up a bloom layer
const BLOOM_LAYER = 1;
const bloomLayer = new THREE.Layers();
bloomLayer.set(BLOOM_LAYER);

// Add objects to the bloom layer
yourEmissiveObject.layers.enable(BLOOM_LAYER);

Try these adjustments to your implementation and see if they resolve the white screen issue. The most common problem is usually related to either the import paths or not using the composer in the animation loop.