En gráficos 3D, las sombras se utilizan para simular el efecto de la luz golpeando un objeto y proyectando una sombra en otro objeto.

Proyectar y recibir sombras

React Three Fiber facilita la adición de sombras a una escena.

Lo primero que necesitamos hacer es habilitar las sombras globalmente añadiendo el prop shadows en el componente <Canvas />:

Copy
<Canvas shadows />

Luego, debes habilitar las sombras en los objetos que proyectarán sombras:

Copy
<mesh castShadow />

Y en los objetos que recibirán sombras:

Copy
<mesh receiveShadow />

Por supuesto, puedes habilitar ambos en el mismo objeto:

Copy
<mesh castShadow receiveShadow />

Hagámoslo en nuestro proyecto:

Copy
<Canvas shadows camera={{ position: [0, 3, 3] }}>
  {/* ... */}
  <mesh rotation-y={Math.PI / 4} castShadow>
    <boxGeometry />
    <meshStandardMaterial color="white" />
  </mesh>

  <mesh rotation-x={-Math.PI / 2} position-y={-0.5} receiveShadow>
    <planeGeometry args={[5, 5]} />
    <meshStandardMaterial color="white" />
  </mesh>
</Canvas>

Hemos añadido shadows en el <Canvas />, castShadow en el cubo y receiveShadow en el plano, pero no ocurre nada.

Esto se debe a que también necesitamos indicar qué luz proyectará sombras.

Copy
{
  /* ... */
}
<directionalLight position={[5, 5, 5]} intensity={0.5} castShadow />;
{
  /* ... */
}

Ahora, podemos ver la sombra del cubo en el plano. También podemos establecer sombras desde múltiples luces:

Copy
{/* ... */}
<directionalLight position={[5, 5, 5]} intensity={0.5} castShadow />
<directionalLight position={[-5, 5, 5]} intensity={0.5} color="red" castShadow />
{/* ... */}

Ve cómo el color de la sombra es afectado por el color de las luces.

Vamos a añadir una esfera a la escena: