In questa lezione esploreremo modi e componenti per rendere le nostre esperienze 3D più professionali.

Mentre il contenuto di una scena è importante, il modo in cui è presentato può fare una grande differenza. I modelli 3D più belli possono apparire mediocri se non sono presentati in un buon modo.

Il nostro progetto iniziale è una Tesla Model 3 visualizzata al centro dello schermo.

La scena contiene un orbit control che ci permette di muoverci intorno all'auto. Ho configurato il controllo per avere sempre una buona vista dell'auto. Anche questo fa parte dell'allestimento e dell'esperienza professionale.

C'è solo una fonte di luce: una ambient light. Essa illumina appena la scena e l'auto sembra piatta.

Vediamo come possiamo migliorarlo! Ti prometto che il risultato finale sarà molto migliore.

Stage

Stage dalla libreria Drei è un componente wrapper che crea un'adeguata configurazione di illuminazione da studio per la tua scena.

Avvolgiamo la nostra auto in un componente Stage:

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

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

L'auto sembra già molto migliore! L'illuminazione è più realistica e l'auto appare più 3D. Abbiamo anche ombre!

Possiamo personalizzare il componente Stage passando alcune props:

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

• intensity controlla l'intensità della luce. Il valore predefinito è 0.5.
• preset controlla l'impostazione dell'illuminazione. Il valore predefinito è rembrandt.
• environment controlla il preset dell'ambiente. Il valore predefinito è city. (copriremo l'ambiente più avanti in questa lezione)

Questo componente è molto utile e un modo rapido per rendere la tua scena migliore. Ha anche altre props che puoi controllare nella documentazione.

A volte avrai bisogno di avere maggiore controllo, ecco perché esploreremo altri modi per creare ambienti di illuminazione.

Colore di sfondo e nebbia

Finora, in questo corso, abbiamo sempre mantenuto lo sfondo trasparente. Questo ha portato a uno sfondo bianco a causa dello sfondo della nostra pagina HTML.

Ciò significa che puoi cambiare il colore di sfondo impostando il colore di sfondo del body della tua pagina in CSS e persino utilizzare gradienti o immagini.

In index.css aggiungi il seguente codice:

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

Questo è un gradiente trovato su Grabient.

La nostra scena ora ha un bel sfondo.

Non possiamo sempre fare affidamento sullo sfondo della pagina per impostare il colore di sfondo della nostra scena. Ad esempio, se vogliamo utilizzare la nebbia, è necessario che la scena abbia un colore di sfondo.

Per aggiungere un colore di sfondo alla nostra scena, dobbiamo collegare un componente color alla proprietà background della scene.

Aggiungiamo un sfondo blu scuro alla nostra scena:

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

La nostra scena 3D ora ha uno sfondo e nasconde il gradiente della pagina.

Ora aggiungiamo un po' di nebbia alla nostra scena:

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

Il componente fog prende 3 argomenti:

• color: il colore della nebbia.
• near: la distanza dalla fotocamera dove inizia la nebbia.
• far: la distanza dalla fotocamera dove finisce la nebbia.

Si dissolve dolcemente tra le distanze near e far.