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

Dongwoo Ha님의 프로필 이미지

작성한 질문수

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

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

바닥에서 뱅글뱅글 도는 이미지.

작성

·

472

1

스크린샷 2022-09-27 오후 2.57.58.png

좋은강의 먼저 감사드립니다.

선생님과 동일하게 만들어 보다가,

첨부드리는 이미지의 핑크색 동그라미 부분, 구의 바닥 부분에 이미지가 2장? 겹쳐서 보이는 부분이 나타납니다. (ex06 (이미지 사용), ex05(red단색) 동일하게 나타나는 현상)

마우스 컨트롤로 화면을 움직여 보면, 혼자 뱅그르르 계속 돌고 있고 없어지진 않습니다.....

 

SphereGeometry의 각 정점을 추출해서, 그 자리에 image texture를 입힌 PlaneGeometry로 대체하는것으로 배웠는데요, SphereGeometry의 중복되는 포인트가 있어서 해당 문제가 발생되는걸까요..?

혹시나 해서, ex01예제를 다시 확인 해 보았어요.

ex01에서 보았던 포인트만으로 표현 구를 만들었을때 샘플입니다.

스크린샷 2022-09-27 오후 3.15.50.pngSphereGeometray(1,8,8)값으로 생성한 구 인데,

스크린샷 2022-09-27 오후 3.17.03.png마우스 드래그로 확대해서 보면, 위/아래 모두 점 하나로 구성된것으로 보입니다.

점 하나에 이미지 하나라면, 지금 이 현상은 왜 일어나는지 궁금합니다. ㅡㅜ

 

 

답변 1

0

제가 오늘 포폴에 이부분 적용시키느라 깨달은 부분에 대해 말씀드릴게요.

SphereGeometry가 position을 보시면 곂치는 부분이 많아요. SphereGeometry(1,7,7)을 할 경우 7*7 해서 49개의 포인트를 가질거라고 생각할수 있는데 최상단은 1개를 가지고, 최하단 꼭지점의 중복을 제외하면 1개의 라인에 6개를 가지고 최하단에 중복이 생겨버립니다. 그래서 7*7인 경우 44(1+6*7+1)개를 가져야 하지만 최하단만 중복되는게 아니라 다른 부분도 중복된 부분이 많습니다. attributes.position.array를 콘솔 찍어보시면 동일한 좌표가 많이 보이실겁니다. 모든 중복된 부분을 제외시키기를 원하시면 강사님이 말하신대로 직접 하나 만드시거나 중복된 부분을 제외 시켜야 합니다. 아니면 최하단 빙글빙글 도는 부분만 처리하고 싶으시면 최하단 좌표는 array에서 제일 마지막 좌표에 위치해 있습니다. 그런데 1~2개가 아니라 여러개가 중복됬기 때문에 3의 배수 배로 splice 시켜보면서 확인하시면 될겁니다.

저는 동일좌표 제외시키게 알고리즘 짜서 돌리고 일일이 확인해서 중복되는 부분을 splice로 지우는 방법으로 만들었습니다.