En esta lección exploraremos formas y componentes para hacer que nuestras experiencias 3D sean más profesionales.

Aunque el contenido de una escena es importante, la forma en que se presenta puede hacer una gran diferencia. Los modelos 3D mejor hechos pueden verse mediocres si no se presentan de una buena manera.

Nuestro proyecto inicial es un Tesla Model 3 mostrado en el centro de la pantalla.

La escena contiene un orbit control para que podamos movernos alrededor del coche. Configuré el control para siempre tener una buena vista del coche. Esto también es parte de la puesta en escena y de la experiencia profesional.

Solo hay una fuente de luz: una luz ambiental. Esta apenas ilumina la escena y el coche se ve plano.

¡Veamos cómo podemos mejorar esto! Te prometo que el resultado final se verá mucho mejor.

Stage

Stage de la biblioteca Drei es un componente contenedor que crea una configuración de iluminación de estudio adecuada para tu escena.

Envolvamos nuestro coche en un componente Stage:

Copy
import { Stage } from "@react-three/drei";
// ...

export const Experience = () => {
  return (
    <>
      {/* ... */}
      <Stage>
        <TeslaModel3 scale={0.012} position-z={0.6} />
      </Stage>
      {/* ... */}
    <>
  );
};

El coche ya se ve mucho mejor! La iluminación es más realista y el coche se ve más 3D. ¡Incluso tenemos sombras!

Podemos personalizar el componente Stage pasándole algunos props:

Copy
<Stage intensity={0.4} preset={"upfront"} environment={"studio"}>
  <TeslaModel3 scale={0.012} position-z={0.6} />
</Stage>

• intensity controla la intensidad de la luz. El valor predeterminado es 0.5.
• preset controla la configuración de la iluminación. El valor predeterminado es rembrandt.
• environment controla el preset del entorno. El valor predeterminado es city. (cubriré el entorno más adelante en esta lección)

Este componente es muy útil y una forma rápida de hacer que tu escena se vea mejor. También tiene otros props que puedes consultar en la documentación.

A veces necesitarás tener más control, por eso exploraremos otras formas de crear entornos de iluminación.

Color de fondo y niebla

Hasta ahora en este curso, siempre hemos mantenido el fondo transparente. Esto dio lugar a un fondo blanco debido al fondo de nuestra página HTML.

Lo que significa que puedes cambiar el color de fondo estableciendo el color de fondo del body de tu página en CSS e incluso usar degradados o imágenes.

En index.css agrega lo siguiente:

Copy
body {
  margin: 0;
  background-color: #d9afd9;
  background-image: linear-gradient(0deg, #d9afd9 0%, #97d9e1 100%);
}

Este es un degradado que encontré en Grabient.

Nuestra escena ahora tiene un nicho fondo.

No siempre podemos confiar en el fondo de la página para establecer el color de fondo de nuestra escena. Por ejemplo, si queremos usar niebla, esto requiere que la escena tenga un color de fondo.

Para agregar un color de fondo a nuestra escena, necesitamos adjuntar un componente color a la propiedad background de la scene.

Vamos a agregar un fondo azul oscuro a nuestra escena:

Copy
<Canvas camera={{ position: [-3, 1.5, 12], fov: 30 }}>
  <color attach="background" args={["#171720"]} />
  {/* ... */}
</Canvas>

Nuestra escena 3D ahora tiene un fondo y oculta el degradado de la página.

Ahora agreguemos un poco de niebla a nuestra escena:

Copy
<Canvas camera={{ position: [-3, 1.5, 12], fov: 30 }}>
  <color attach="background" args={["#171720"]} />
  <fog attach="fog" args={["#171720", 20, 30]} />
  {/* ... */}
</Canvas>

El componente fog toma 3 argumentos:

• color: el color de la niebla.
• near: la distancia desde la cámara donde la niebla empieza.
• far: la distancia desde la cámara donde la niebla termina.

Se desvanece suavemente entre las distancias near y far.