[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>

[simranrizvi777-gif]

Hi Anh Huy,
Problems like this often come from heavy geometry, material settings, or glTF export configuration in R3F scenes. We have helped teams resolve similar issues by optimizing the model and textures for smoother runtime performance.

If helpful, happy to share a quick checklist you can try.