소개

View tracking

이 예제는 View 컴포넌트의 기능을 보여 줍니다.

View는 일종의 react portal과 같은 기능을 합니다. R3f의 렌더링 결과를 마치 html 요소들 사이에 배치하는 효과를 낼 수 있습니다.

return (
  <main ref={container}>
    <h1>Html content here</h1>
    <View style={{ width: 200, height: 200 }}>
      <mesh geometry={foo} />
      <OrbitControls />
    </View>
    <View className="canvas-view">
      <mesh geometry={bar} />
      <CameraControls />
    </View>
    <Canvas eventSource={container}>
      <View.Port />
    </Canvas>
  </main>
)

먼저 컨테이너 역할의 html 요소를 canvas에 지정해 줍니다. 위 예제의 경우 <main> 테그가 컨테이너가 됩니다. R3f <Canvas />는 컨테이너 영역을 overlay 하면서 <View /> 컨포넌트를 통해 렌더링한 요소를 표시하는 역할을 합니다.

View tracking 예제는 .view 클래스로 지칭하는 inline html 요소를 일반 텍스트와 함께 배치하고 여기에 <View /> 컴포넌트를 사용하여 R3f 요소를 overlay 렌더링합니다.

특별히 version 8 텍스트의 link hover 시에 <View /> 컴포넌트를 렌더링하여 interactive한 시나리오에서도 유연한 구현을 할 수 있음을 보여 줍니다.

R3f: View tracking

소개