Pairing Three.js to UI

다음 R3F 예제를 살펴봅니다.

Pairing Three.js to UI

Beech

이 예제는 pmndrs/leva UI를 통해 렌더링할 GLTF 모델을 선택합니다.

선택한 GLTF 모델에 따라 GLTF 파일이 있는 url을 useGLTF hook으로 전달합니다.

useGLTF 파일 변경이 이루어지면 비동기 파일 로딩이 이루어지면서 해당 컴포넌트를 suspend 합니다.

따라서 React.Suspend 컴포넌트로 fallback 처리를 해 줍니다.

tunnel-rat은 <Tunnel.In /> 컴포넌트 태그 안에서 랜더링한 컴포넌트를 <Tunnel.Out /> 컴포넌트 태그 안에 표시하는 기능입니다.

초기화는 다음과 같이 합니다.

import tunnel from 'tunnel-rat'
const t = tunnel()

특정 위치에 tunnel-rat을 사용해서 컴포넌트를 표시할 위치에 다음과 같이 Out 컴포넌트를 배치 합니다.

<t.out />

이후 다음과 같은 컴포넌트를 마운트하면 In 컴포넌트 안에 있는 내용을 Out으로 출력합니다.

<t.In>
  <h1>tunnel-rat</h1>
  <p>이 내용을 `t.Out` 컴포넌트에 표시합니다.</p>
</t.In>

three.js 컴포넌트에서 UI 메시지나 디버그 용으로 html tag를 구성해서 마운트 하면 <Canvas /> 객체 밖에 배치한 Out 컴포넌트에 표시할 수 있습니다.

R3f: Pairing Three.js to UI