在本课程中，我们将探讨一些方法和组件，以使我们的 3D 体验看起来更加 专业。

虽说 场景的内容很重要，但呈现的方式会带来 巨大的差异。即使是外观最佳的 3D 模型，如果没有 良好的呈现，看起来也可能 平平无奇。

我们开始的项目是在屏幕中央显示的一个 Tesla Model 3。

场景中包含一个 轨道控制，我们可以绕着汽车移动。我将控制配置为 始终获得良好视角。这也是 场景搭建 和 专业外观体验 的一部分。

目前只有一个光源：一个 环境光。它 几乎照亮了场景，而汽车看起来 很平。

让我们看看如何改善这种情况！我向您保证最终的结果会看起来 好得多。

Stage

来自 Drei 库的 Stage 是一个包装组件，为你的场景创建一个合适的工作室照明设置。

让我们用 Stage 组件包裹我们的汽车：

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

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

汽车已经看起来 好多了！光照更加 逼真，汽车看起来 更有立体感。我们甚至还有 阴影！

我们可以通过传递一些 props 来 自定义 Stage 组件：

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

• intensity 控制光源的 强度。默认值为 0.5。
• preset 控制 灯光设置。默认值为 rembrandt。
• environment 控制 环境预设。默认值为 city。 (稍后我们会在本课程中讨论环境)

这个组件非常 有用，是让你的场景看起来更 好的 快速方法。它还有其他可查看的 props，详情请见文档。

有时您需要 更多控制，这就是我们将探索其他创建 灯光环境 的方式的原因。

背景颜色和雾效果

到目前为止，在本课程中，我们始终保持 背景透明。由于我们的 HTML 页面的背景，导致了白色背景。

这意味着你可以通过在 CSS 中设置 页面 的 body 背景颜色来 更改背景颜色，甚至可以使用渐变或图像。

在 index.css 中添加以下代码：

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

这是我在 Grabient 上找到的一个渐变。

现在我们的场景有了一个 漂亮的背景。

我们不能总是依赖 页面背景 设置场景的 背景颜色。例如，如果我们想使用 雾，就需要场景具有 背景颜色。

要为场景添加 背景颜色，我们需要将一个 color 组件附加到 scene 的 background 属性上。

让我们为场景添加一个 深蓝色背景：

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

我们的 3D 场景现在有了背景，并隐藏了页面的渐变。

现在让我们为场景添加一些 雾：

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

fog 组件需要三个参数：

• color：雾的 颜色。
• near：雾开始的相机 距离。
• far：雾结束的相机 距离。

它在 near 和 far 之间平滑地 渐变。