지금까지 우리가 구축한 3D 경험은 Three.js 3D 장면이 렌더링된 canvas HTML 요소로만 구성되었습니다.

경험을 좀 더 인터랙티브하게 만들 수 있는 방법은 두 가지가 있습니다:

• HTML 페이지를 일반적으로 작성한 다음 3D 장면을 전체 화면 canvas의 배경으로 추가합니다. 그런 다음 마우스 이벤트나 페이지 스크롤을 통해 잘 통합합니다. 이는 애니메이션 수업의 스크롤 섹션에서 다룰 예정입니다.
• HTML 요소를 3D 장면의 3D 객체처럼 추가하는 방법입니다. 이 방법을 이번 수업에서 살펴볼 것입니다.

이 두 가지 접근법은 상호 배타적이지 않습니다. 몰입형 경험을 만들기 위해 결합할 수 있습니다.

Ikea 온라인 쇼룸

이번 수업에서는 Ikea를 위한 온라인 쇼룸을 만들고 싶다고 상상해 봅시다. 시작 패키지에는 다양한 주방 가구의 3D 모델이 포함되어 있습니다 (모두 Quaternius on Poly Pizza에서 제공, 감사합니다 🙏).

현재까지의 모습. 일본식 주방입니다.

각 주방 가구에 이름과 가격을 표시하기 위해 레이블을 추가하려고 합니다.

이를 수행하기 전에 스타터 팩의 일부 부분을 설명하겠습니다.

코드를 일반화하기 위해, 각 항목을 수동으로 선언하고 로딩 및 위치 조정 로직을 반복 작성하는 대신, 여러 items를 담은 배열을 생성했습니다.

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
  },
];

그리고 Item이라는 일반적 컴포넌트를 생성하여 모델 경로 및 다른 변환 props _(position, rotation, scale...)_를 받습니다:

Copy
const Item = ({ model, position, rotation, ...props }) => {
  const gltf = useGLTF(`models/${model}`);

  return (
    <group position={position} rotation={rotation}>
      <primitive object={gltf.scene} {...props} />
    </group>
  );
};

이 컴포넌트는 3D 모델을 로딩하고 장면에서 위치 조정하는 작업을 처리합니다. 이후 HTML 요소를 자식으로 추가할 수 있도록 그룹을 루트 요소로 선택했습니다.

그런 다음 items 배열을 반복하여 각 항목에 대해 Item 컴포넌트를 렌더링합니다:

Copy
export const Experience = () => {
  return (
    <>
      {sceneItems.map((item, index) => {
        return <Item key={index} {...item} />;
      })}
    </>
  );
};

3D에서의 HTML 요소

우리가 일반 컴포넌트를 사용하여 어떤 3D 모델을 렌더링하고 장면 내에서 위치를 지정할 수 있게 되었으므로, 이제 가구 라벨링에 집중해 보겠습니다.

label과 price 속성을 items 배열에 추가함으로써 더 많은 정보를 추가해 봅시다:

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
    name: "Hemnes",
    price: 300,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
    name: "Lillången",
    price: 450,
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
    name: "Skogsta",
    price: 25,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
    name: "Lagan",
    price: 600,
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
    name: "Lerhamn",
    price: 80,
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
    name: "Dango",
    price: 4,
  },
];

이름과 가격은 GitHub Copilot이 생성한 것이니 불쾌하게 생각하지 마세요...

이제 Item 컴포넌트를 name과 price 속성을 받아들이도록 업데이트하고, 이를 HTML 요소로 렌더링해보겠습니다: