이 강의에서는 3D 경험을 더욱 프로답게 보이도록 만드는 방법과 구성 요소를 탐구해 보겠습니다.

장면의 내용이 중요하긴 하지만, 그것이 어떻게 표현되느냐에 따라 큰 차이가 생길 수 있습니다. 최고의 3D 모델도 좋은 방식으로 표현되지 않으면 별로일 수 있습니다.

출발 프로젝트는 화면 중앙에 표시된 Tesla Model 3입니다.

장면에는 자동차 주변을 이동할 수 있는 orbit control이 포함되어 있습니다. 제어를 통해 자동차를 항상 잘 볼 수 있도록 설정하였습니다. 이것도 스테이징과 프로같은 경험의 일부입니다.

현재 광원은 하나뿐인 ambient light입니다. 장면을 간신히 밝히며, 자동차가 평면적으로 보입니다.

이제 어떻게 개선할 수 있는지 알아보겠습니다! 마지막 결과물이 훨씬 나아질 것이라고 약속드립니다.

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>
      {/* ... */}
    <>
  );
};

자동차가 이미 훨씬 나아졌습니다! 조명이 더 현실적이며 자동차가 더 3D처럼 보입니다. 심지어 그림자도 있습니다!

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입니다. (이 강의에서 환경 프리셋에 대해 후에 다룰 것입니다)

이 컴포넌트는 장면을 향상시킬 수 있는 빠른 방법으로 유용합니다. 다른 속성은 문서에서 확인할 수 있습니다.

때로는 더 많은 제어가 필요할 수 있으므로, 조명 환경을 생성하는 다른 방법도 탐구해 보겠습니다.

배경색과 안개

이 강좌에서는 배경을 투명하게 유지했습니다. 이는 HTML 페이지의 배경 때문에 흰색 배경을 만들었습니다.

즉, CSS에서 페이지의 body의 배경색을 설정하여 배경색을 변경할 수 있으며, 그라데이션이나 이미지를 사용할 수도 있습니다.

index.css에 다음을 추가하세요:

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

Grabient에서 찾은 그라데이션입니다.

우리의 장면은 이제 멋진 배경을 갖게 되었습니다.

우리의 장면의 배경색을 설정하기 위해 항상 페이지 배경에 의존할 수는 없습니다. 예를 들어 안개를 사용하려면 장면에 배경색이 필요합니다.

장면에 배경색을 추가하려면 scene의 background 속성에 color 컴포넌트를 연결해야 합니다.

다음은 장면에 짙은 푸른색 배경을 추가하는 방법입니다:

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 컴포넌트는 3개의 인자를 받습니다:

• color: 안개의 색상.
• near: 카메라에서부터 안개가 시작되는 거리.
• far: 카메라에서부터 안개가 끝나는 거리.

이는 near와 far 거리 사이에서 부드럽게 페이딩됩니다.