SoftShadows do not work

[hatchli]

Replacing the Dog in the starter code with a simple example of Soft Shadows on a simple cube or sphere demonstrate that Soft Shadows do not work. Contact Shadows are rendered instead.

Screen.Recording.2023-06-02.at.4.55.11.PM.mov

The same code in a starter Vite project function as expected.

Screen.Recording.2023-06-02.at.4.58.43.PM.mov

Activating Shadows on the element in Layout.jsx

  `<Scene shadows ... />`

The code difference in Example.jsx

import { useFrame } from '@react-three/fiber'
import {... useHelper, SoftShadows, OrbitControls } from '@react-three/drei'
import { useControls } from 'leva'

...

export function Dog(props) {
  const cube = useRef()
  const directionalLight = useRef()
  useHelper(directionalLight, THREE.DirectionalLightHelper, 1)
  const { sunPosition } = useControls('sky', {
    sunPosition: { value: [1, 2, 3] }
  })
  useFrame((state, delta) => {
    cube.current.rotation.y += delta * 0.2
  })

  return <>
    <SoftShadows frustum={4.75} size={0.05} near={9.5} samples={16} rings={11} />

    <OrbitControls makeDefault />

    <directionalLight
      ref={directionalLight}
      position={sunPosition}
      intensity={1.5}
      castShadow
      shadow-mapSize={[1024, 1024]}
      shadow-camera-near={1}
      shadow-camera-far={10}
      shadow-camera-top={5}
      shadow-camera-right={5}
      shadow-camera-bottom={- 5}
      shadow-camera-left={- 5}
    />
    <ambientLight intensity={0.5} />

    <mesh receiveShadow position-y={0} rotation-x={- Math.PI * 0.5} scale={10}>
      <planeGeometry />
      <shadowMaterial />
    </mesh>

    <mesh castShadow position-y={1} position-x={- 2}>
      <sphereGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
    <mesh ref={cube} castShadow position-y={1} position-x={2} scale={1.5}>
      <boxGeometry />
      <meshStandardMaterial color="mediumpurple" />
    </mesh>
  </>
}