Upgrading to Latest ThreeJS adds an extra plane like geometry

[sabinayakc]

 "@react-three/drei": "9.108.1",
    "@react-three/fiber": "8.16.8",
    "@types/three": "0.166.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1",
    "three": "0.166.0"

Problem description:

I upgraded to the latest three and I see a weird plane geometry. It happens in other cases as well.

Relevant code: Update this codesandbox to the latest versions.

https://codesandbox.io/s/57iefg

[rndexe]

I'm assuming this is using <AccumulativeShadows>.

Steps to fix:

1. Multiply intensity of RandomizedLight by Math.PI if set to 1
2. Reduce alphaTest on AccumulativeShadows just enough that the plane disappears

[sabinayakc]

Im using helper. How do I fix this ?

 <Stage
        intensity={1}
        preset="rembrandt"
        shadows={{
          type: 'accumulative',
          color: 'skyblue',
          colorBlend: 2,
          opacity: 1
        }}
        adjustCamera={1}
        environment="city"
      >
      ```

[rndexe]

try adding intensity: Math.PI to the shadows prop. Like so :

 <Stage
        intensity={1}
        preset="rembrandt"
        shadows={{
          type: 'accumulative',
          color: 'skyblue',
          colorBlend: 2,
          opacity: 1,
          intensity: Math.PI
        }}
        adjustCamera={1}
        environment="city"
      >    

[calvinhnzr]

The plane starts to appear from three.js version r155 and higher. From r154 and below the plane is not visible.

Grid Component r154
Grid Component r155