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

육영서님의 프로필 이미지
육영서

작성한 질문수

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

기본 장면 만들기 - Renderer

three.js 수업 중 질문입니다.

해결된 질문

작성

·

517

0

안녕하세요 선생님.  좋은수업 감사합니다.

수업을 듣고 연습 중 몇가지 궁금한 점이 생겼습니다.

 

1. 페이지에서,  renderer 를 여러개의 div element에 중복 적용하고 싶은데요,  한개의 renderer로 append를 시도하니 오류가 납니다. 동일한 renderer가 여러 element에 중복 append 될 수 있을까요??

 

2. 라운드처리 된 직사각형이 z축으로 extrude 된 아래와 같이 앞면, 뒷면의 각이 살아있는 육면체를 만들고 싶은데, 혹시 지오메트리를 사용해서 만들 수 있는 방법이 있나요??

 

3. GLTF Loading을 시도하였는데, Live Server 에서는 잘 동작하지만, 개인 호스팅에 업로드시  ~~ has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이렇게 나와 오류가 나고 있습니다.. 혹시 three 내에서 설정할 수 있는 부분이 있을까요..? 사실 3번이 되지 않아 2번을 여쭤보게 되었습니다.. ㅠ

 

질문이 조금 많지만 ㅠ 혹시 답변주시면 정말 감사하겠습니다!

앞으로 열심히 공부하겠습니다. 좋은 강의 만들어주셔서 다시한번 감사합니다^^

답변 1

2

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

1. 실 서비스에 적용할 때 말씀하신 부분이 필요한 경우가 꽤 많을 것 같아서, 관련해서 추가 영상을 제작하고 있습니다^^ 추가 영상 제작되면 알려드릴게요~~

2. https://threejs.org/docs/#api/en/geometries/ExtrudeGeometry
Shape로 형태를 만들고 ExtrudeGeometry를 이용해서 가능할텐데요, 말씀하신대로 glb 파일을 활용하시는게 더 간편할 것 같습니다.

3. CORS 에러는 다른 서버에 있는 리소스를 요청했을 때 보통 발생하는데요, 혹시 glb 파일이 다른 서버에 올라가 있을까요? 왠지 그건 아닐 것 같은데^^; three.js와 연관이 있다기 보다는, 사용하시는 서버와 관련된 세팅을 수정해주셔야 할 것 같습니다. 정 해결이 어렵다면 일단 다른 서버에서 테스트 해보시면 어떨까 싶습니다!
CORS 관련해서 얄코님의 정말 좋은 영상이 있어서 링크 올려드릴게요.
https://www.youtube.com/watch?v=bW31xiNB8Nc

(힘나는 첫 수강평 달아주셔서 정말 감사합니다 영서님!)

육영서님의 프로필 이미지
육영서
질문자

선생님 답변 주셔서 감사합니다! 새로운 영상까지.. 기대가 되네요ㅠㅠ

ExtrudeGeometry 라는게 있군요..! 아이폰 5의 깻잎통 디자인 같은 느낌을 생각했는데 이리저리 만져보면서 시도해 보겠습니다.  CORS도 개념이 어려웠는데 이해가 잘 되었어요. 선생님께 힘이 되셨다면 저도 기쁘고 언제나 좋은 수업과 친절한 설명에 다시 한번 감사드립니다! :)

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

1번 질문 관련 내용 추가 콘텐츠로 업로드 했습니다!

육영서님의 프로필 이미지
육영서

작성한 질문수

질문하기