[Capstone Project] template 모델 부위별 따로 생성하기 / position 옮기기 & 모델 분리 / slider 분리 적용

※ 해당 글은 capstone 종합설계 프로젝트를 하면서 적었던 일지를 돌아보며 작성한 것입니다.

개발일지 2022.11.08 ~ 11.09

cloth_top과 cloth_bottom을 나누어 각각 모델을 렌더링하고 있는데, 처음에 서로 다른 model을 이용하였을 때는 잘 나오는데, 실시간으로 불러오기를 통해 load하였을 떄 동태를 보고있다.

현재 상황으로는 모델이 겹치는 바람에 cloth_bottom이 나중에 렌더링되어 뒤덮어서 잘 보이지 않는 모양이다.

일단 cloth_bottom의 position을 옮겨볼까?

 

---

 

하의를 상의와 position분리하기 위해서 하의인 경우에만 모델을 로딩할 때 position의 y좌표를 설정하였다.

<OrbitControls target={[0,1,0]}/>

모델을 만들면 자동으로 orbitcontrol의 타겟이 잡히는데, 위 방법으로 고정타겟을 설정하자.

 

position을 옮겨서 여러 모델을 로딩시켜보니, 같은 모델을 가져오면 기존의 불러왔던 모델은 사라지는 모양이다.

 

즉 top에서 사용한 모델을 bottom에서도 사용해서 로딩하면 top이 사라진다.

 

다행히도 top에서 사용한 모델은 건드리지 않고, 다른 모델로 바꾸면 load버튼을 눌렀을 때 정상적으로 바뀐다.

 

이제 slider ui로 조정하는 것을 따로 분리해보고 select_slider를 만들어보자.

---

큰일이다. sleeve를 보니까 최상단 컴포넌트에서부터 내려온 useState인 origin 과 group을 사용해서 조정한다.

즉 useState안에 model이 들어가있어야한다는 뜻인데, 방법은 두 가지가 생각난다.

 

첫 번째는 template별로 useState를 따로 만드는 것

 

두 번째는 useState origin을 originObj로 만들어서 내부에 template를 key로 구분해서 넣는 것이다.

 

역시 두 번째가 가능하다면 사용이 편하겠지.