Troubleshooting the Unexpected Black Plane in Three.js

Based on the information you've provided, this appears to be an issue with a clipping plane or a helper that might have been accidentally added to your scene. Since the problem only appears in Chrome but not in Edge, it could indeed be related to a browser-specific rendering issue or a recent Chrome update.

Here are some potential causes and solutions to investigate:

Check for PlaneHelper

The black plane looks similar to what might be rendered by a PlaneHelper. Even though you mentioned you never added one, check your code for any instances of:

JAVASCRIPTCopied
const helper = new THREE.PlaneHelper(plane, size, color);
scene.add(helper);

Inspect Clipping Planes

The issue might be related to clipping planes. Check your renderer settings for any clipping planes that might have been defined:

JAVASCRIPTCopied
// Check if you have any clipping planes defined
console.log(renderer.clippingPlanes);

// If needed, reset clipping planes to empty array
renderer.clippingPlanes = [];

Additional Troubleshooting Steps

1. Check if you're using any post-processing effects that might be causing this issue
2. Verify that your camera settings (near/far planes) are properly configured
3. Try updating to the latest version of Three.js if you haven't already
4. Inspect your scene graph in Chrome DevTools to see if there are any unexpected objects
5. Add a simple debug function to log all objects in your scene to verify what's actually being rendered

Since the issue appears in Chrome but not Edge, you might also want to check if hardware acceleration settings in Chrome could be affecting the rendering.

If none of these solutions work, consider sharing a minimal reproducible example of your code to help identify the exact cause of the problem.