Staging

Starter pack

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

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

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

Tesla Model 3

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

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

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

Stage

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

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

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

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

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

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

<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に次のコードを追加します:

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

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

Background gradient

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

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

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

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

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

Dark blue background

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

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

<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: 霧が終わるカメラからの距離

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

End of lesson preview

To get access to the entire lesson, you need to purchase the course.