[v8.8.8] Cannot cast shadow behind an object

[AnhHuy02]

I created a simple scene that contains Directional Light, Orbit Controls (for camera control), and a Group that contains meshes:

// App.jsx
import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";
import { OrbitControls } from "@react-three/drei";

import StadiumScene from "./StadiumScene";

const fov = 45;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;

export default function BallTracker() {
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.y = 15;

  return (
      <Canvas camera={camera}>
        <scene>
          <OrbitControls
            camera={camera}
            minPolarAngle={0}
            maxPolarAngle={Math.PI / 2 - THREE.MathUtils.degToRad(1)}
          />

          <directionalLight
            position={[0, 5, 2]}
            castShadow
            color={0x602376}
            intensity={1.0}
          />

          <StadiumScene />
        </scene>
      </Canvas>
  );
}

In StadiumScene component, it only has Sphere and Plane objects:

// StadiumScene.jsx
import React, { useRef, useEffect } from "react";
import * as THREE from "three";

function StadiumScene({ group, props }) {
  const planeRef = useRef();

  useEffect(() => {
    planeRef.current.rotation.x = -Math.PI / 2;
  }, []);

  return (
    <group {...group}>
      <mesh position={[0, 1, 0]} castShadow>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color={"white"} emissive={"black"} />
      </mesh>

      <mesh ref={planeRef} castShadow receiveShadow position={[0, 0, 0]}>
        <planeGeometry args={[10, 10]} />
        <meshStandardMaterial color={"white"} emissive={"blue"} />
      </mesh>
    </group>
  );
}

export default StadiumScene;

However when running it on the browser, the shadow behind the Sphere didn't cast on the plane

Did I do something wrong or miss syntax? I used React 18.12.0, three 0.145.0, @react-three/fiber 8.8.8 and @react-three/drei 9.32.7

[CodyJasonBennett]

You'll need to enable shadow maps on the renderer. R3F's Canvas has a shadows prop that enables PCFsoft. See https://docs.pmnd.rs/react-three-fiber/api/canvas.

Also, prefer not to create objects in the body of a render function, furthermore you can configure your camera via the camera prop.

<Canvas shadows camera={{ fov: 45, near: 0.1, far: 100, "position-y": 15 }}>
  <OrbitControls
    minPolarAngle={0}
    maxPolarAngle={Math.PI / 2 - THREE.MathUtils.degToRad(1)}
  />
  <directionalLight
    position={[0, 5, 2]}
    castShadow
    color={0x602376}
    intensity={1.0}
  />
  <StadiumScene />
</Canvas>