drei/RenderTexture
https://codesandbox.io/p/sandbox/drei-rendertexture-0z8i2c?
12면체(Dodecahedron) 표현을 위해 <dodecahedronGeometry/> 컴포넌트를 사용합니다.
12면체는 click, hover 이벤트에 따라 크기와 색상을 변경하도록 구성합니다. 또한 useFrame을 사용하여 지속적으로 회전하도록 합니다.
먼저 3차원 평면에 12면체를 배치합니다.
정사각형 표면에 texture를 입히기 위해 drei 패키지의 RenderTexture를 사용합니다.
RenderTexture 컴포넌트의 child로 구성한 컴포넌트는 독립적인 좌표계 내에서 3차원 객체를 렌더링합니다.
이렇게 렌더링한 객체는 다시 정사각형 mesh의 <meshStandardMaterial/> 컴포넌트를 사용하여 표면에 렌더링 합니다.
보통 texture는 이미지를 패턴을 상용하여 3차원 객체의 질감을 표현합니다. 이 예제는 더 나아가 texture 내에서 다시 three.js를 활용하여 렌더링한 3차원 객체를 표현하는 방법을 보여주고 있습니다.