패널에 이미지가 아닌 Iframe을 넣는 방법

Question

안녕하세요 선생님~! 제가 패널을 이용해서 제가 만든 웹사이트들을 Iframe을 이용해서 바로 보여주고 싶은데 관련 문서를 5시간 가량 각종 단어와 유튜브, 구글링을 통해 알아봤지만 방법을 알 수 없었습니다 ㅠㅠ 제가 아직 초보 코린이라서 소스를 봐도 이해가 되지 않아서 그런 것 같은데 패널 안에 이미지가 아니라 iframe을 넣을 수 있는 방법이 있을까요..? 제가 구현하고 싶은 느낌은( https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-9keg6?file=/src/App.js ) 이런 느낌인데 아직 모델링은 만들지않았고 우선 테스트용으로 패널만 만들어서 넣고 싶은데 잘 모르겠습니다 ㅠ

1분코딩 · Answer

해당 소스는 react-three-fiber라는, three.js에서 리액트를 렌더링하는 라이브러리를 사용했네요- https://github.com/pmndrs/react-three-fiber 직접 구현보다는 해당 라이브러리의 사용법을 익혀보시는게 빠를 수 있을 것 같아요^^; 참고로 이런 식으로 three.js에서 iframe 등의 html 요소를 렌더링하기 위해서는, CSS3DRenderer라는 렌더러를 사용하면 됩니다. https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer 찾아보니 CSS3DRenderer를 사용해볼 수 있는 아래와 같은 예제가 있네요- https://subscription.packtpub.com/book/web-development/9781783981182/1/ch01lvl1sec12/getting-started-with-the-css-3d-renderer