このレッスンでは、3D体験をよりプロフェッショナルに見せるための方法とコンポーネントを探ります。

シーンの内容は重要ですが、それがどのように提示されるかが大きな違いを生む可能性があります。最も見栄えの良い3Dモデルも、良い方法で提示されなければあまり魅力的ではありません。

私たちのスタータープロジェクトは、画面の中央に表示されたTesla Model 3です。

シーンには、車の周りを移動できるorbit controlがあります。このコントロールを使うことで、常に車の良いビューを保つことができます。これもステージングとプロフェッショナルな体験の一部です。

光源はambient lightひとつだけです。シーンをほとんど照らさず、車が平坦に見えます。

これをどのように改善できるか見てみましょう！最終的にははるかに良く見える結果になります。

Stage

Drei libraryのStageは、シーンのための適切なスタジオ照明設定を作成するラッパーコンポーネントです。

Stageコンポーネントで車をラップしてみましょう：

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

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

車がすでにかなり良く見えます！照明がよりリアルで、車がより立体的に見えます。影さえあります！

Stageコンポーネントにいくつかのpropsを渡すことで、カスタマイズすることもできます：

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についてはドキュメントで確認できます。

時にはより多くのコントロールが必要になることもあります。そのため、他の照明環境を作成する方法も探ってみましょう。

Background color and fog

このコースではこれまで、常に背景を透明にしてきました。これは、HTMLページの背景色のために白い背景となっていました。

つまり、ページのbodyの背景色をCSSで設定することで、背景色を変更することができ、グラデーションや画像を使用することも可能です。

index.cssに次のコードを追加します:

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

これはGrabientで見つけたグラデーションです。

シーンに素敵な背景が追加されました。

常にページ背景に依存してシーンの背景色を設定するわけにはいきません。例えば、霧 (fog) を使用したい場合、シーンには背景色が必要です。

シーンに背景色を追加するには、backgroundプロパティにcolorコンポーネントを付加します。

シーンにダークブルーの背景を追加しましょう:

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

3Dシーンに背景が追加され、ページのグラデーションを隠します。

次にシーンに霧 (fog) を追加しましょう:

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

fogコンポーネントは3つの引数を取ります:

• color: 霧の色。
• near: 霧が始まるカメラからの距離。
• far: 霧が終わるカメラからの距離。

nearとfarの距離の間でスムーズにフェードします。