지금까지 우리는 많은 3D 장면을 만들었지만, 한 번에 하나만 표시하고 전체 페이지를 차지했습니다.

이 강의에서는 이미지를 추가하듯 여러 개의 3D 장면을 단일 HTML 페이지에 통합하는 방법을 배웁니다.

시작 프로젝트

이번 강의에서는 가상의 3D 웹 개발 에이전시를 위한 랜딩 페이지를 만듭니다.

시작 패키지에는 다음과 같은 섹션을 포함하는 간단하고 사용 준비가 완료된 반응형 페이지가 포함되어 있습니다: 홈, 서비스, 팀, 포트폴리오, 연락처.

이것은 검색 엔진과 접근성을 위한 색인 가능한 콘텐츠를 포함하며, 이를 3D 콘텐츠로 개선하고 설명할 표준 HTML 페이지입니다.

3D 콘텐츠가 없는 랜딩 페이지

뷰

페이지 내 여러 3D 장면을 생성하고 렌더링하기 위해 Drei 라이브러리의 View component를 사용할 것입니다.

이를 사용하면 하나의 Canvas 컴포넌트로 여러 독립된 장면(뷰)을 렌더링할 수 있습니다. 이는 하나의 WebGL 컨텍스트만 사용하고 성능 문제를 피할 수 있어 매우 유용합니다.

이 뷰는 타겟 HTML 요소에 바인딩되며, 터치, 마우스, 스크롤 및 크기 조정 이벤트에 적절하게 반응하면서 독립적으로 위치와 크기를 설정할 수 있습니다.

캔버스

페이지를 3D 콘텐츠로 준비하기 위해, main 요소의 최상단에 우리의 평소 Canvas 컴포넌트를 만들어 보겠습니다.

HomePage.jsx:

Copy
// ...
import { Canvas } from "react-three-fiber";

export const HomePage = () => {
  // ...

  return (
    <main>
      <Canvas
        className="canvas"
        camera={{ position: [0, 0, 1.5], fov: 30 }}
      ></Canvas>
      {/* ... */}
    </main>
  );
};

canvas 클래스는 캔버스를 스타일링하고 페이지 전체를 차지하도록 만드는 데 사용됩니다. 이는 이미 index.css 파일에 정의되어 있습니다.

추적

시작 프로젝트에는 페이지의 다양한 섹션을 설명하는 데 사용할 3D 장면 컴포넌트가 포함되어 있습니다.

홈 섹션을 위한 컴포넌트를 추가해 보겠습니다:

Copy
import { Hero3D } from "./Hero3D";

export const HomePage = () => {
  // ...
  return (
    <main>
      <Canvas className="canvas" camera={{ position: [0, 0, 1.5], fov: 30 }}>
        <Hero3D />
      </Canvas>
      {/* ... */}
    </main>
  );
};