Nesta lição, exploraremos formas e componentes para tornar nossas experiências em 3D mais profissionais.

Embora o conteúdo de uma cena seja importante, a maneira como ela é apresentada pode fazer uma grande diferença. Os modelos 3D mais bonitos podem parecer mais ou menos se não forem apresentados de uma forma adequada.

Nosso projeto inicial é um Tesla Model 3 exibido no centro da tela.

A cena contém um orbit control para que possamos nos mover ao redor do carro. Configurei o controle para sempre ter uma boa visão do carro. Isso também faz parte da apresentação e da experiência profissional.

Há apenas uma fonte de luz: uma ambient light. Ela ilumina a cena ligeiramente e o carro parece plano.

Vamos ver como podemos melhorar isso! Prometo que o resultado final ficará muito melhor.

Stage

Stage da biblioteca Drei é um componente de encapsulamento que cria uma iluminação de estúdio adequada para sua cena.

Vamos envolver nosso carro em um componente Stage:

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

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

O carro já parece muito melhor! A iluminação é mais realista e o carro parece mais 3D. Nós até temos sombras!

Podemos personalizar o componente Stage passando alguns props:

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

• intensity controla a intensidade da luz. O valor padrão é 0.5.
• preset controla a configuração de iluminação. O valor padrão é rembrandt.
• environment controla o preset de ambiente. O valor padrão é city. (cobriremos o ambiente mais tarde nesta lição)

Este componente é muito útil e uma maneira rápida de fazer sua cena parecer melhor. Ele também possui outros props que você pode verificar na documentação.

Às vezes, você precisará ter mais controle, e é por isso que exploraremos outras maneiras de criar ambientes de iluminação.

Cor de fundo e neblina

Até agora neste curso, sempre mantivemos o fundo transparente. Isso levou a um fundo branco por causa do fundo da nossa página HTML.

Isso significa que você pode mudar a cor de fundo definindo a cor de fundo do body da sua página em CSS e até mesmo usar gradientes ou imagens.

No index.css, adicione o seguinte:

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

Este é um gradiente que encontrei no Grabient.

Nossa cena agora tem um fundo agradável.

Não podemos sempre depender do fundo da página para definir a cor de fundo da nossa cena. Por exemplo, se quisermos usar neblina, é necessário que a cena tenha uma cor de fundo.

Para adicionar uma cor de fundo à nossa cena, precisamos anexar um componente color à propriedade background da scene.

Vamos adicionar um fundo azul escuro à nossa cena:

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

Nossa cena 3D agora tem um fundo e esconde o gradiente da página.

Agora vamos adicionar um pouco de neblina à nossa cena:

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

O componente fog leva 3 argumentos:

• color: a cor da neblina.
• near: a distância da câmera onde a neblina começa.
• far: a distância da câmera onde a neblina termina.

Ela suavemente desvanece entre as distâncias near e far.