인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

밀크티님의 프로필 이미지
밀크티

작성한 질문수

Three.js로 시작하는 3D 인터랙티브 웹

형태가 바뀌는 이미지 패널 만들기 4

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

작성

·

629

0

안녕하세요 선생님~!

제가 패널을 이용해서

제가 만든 웹사이트들을 Iframe을 이용해서

바로 보여주고 싶은데 관련 문서를 5시간 가량 각종 단어와 유튜브, 구글링을 통해 알아봤지만 방법을 알 수 없었습니다 ㅠㅠ

제가 아직 초보 코린이라서 소스를 봐도 이해가 되지 않아서 그런 것 같은데

패널 안에 이미지가 아니라 iframe을 넣을 수 있는 방법이 있을까요..?

제가 구현하고 싶은 느낌은(https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-9keg6?file=/src/App.js)

 

이런 느낌인데 아직 모델링은 만들지않았고

 

우선 테스트용으로 패널만 만들어서 넣고 싶은데 잘 모르겠습니다 ㅠ

답변 1

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

해당 소스는 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

밀크티님의 프로필 이미지
밀크티

작성한 질문수

질문하기