[Capstone Project] template를 useState에 넣을 때 발생하는 issue

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

개발일지 2022.11.12

React.js 와 three.js를 함께 사용하기 위해서 우리는 react-three fiber 라이브러리를 사용한다.

 

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

React Three Fiber Documentation

서드파티 라이브러리기 때문에 위험성이 클 것으로 예상했고, 많은 과정에서 부딪혀야한다.

 

react-three fiber를 이용해서 모델을 load 완료하였을 시점에 문제가 있다.

top / bottom 등 cloth_type이 다른 template가 동시에 set하는 경우 모두가 null인 값을 가져왔다가 top / bottom이 각자 동시에 적용하면서 다른쪽이 적용되지 않은 값으로 덮어씌워지므로 문제가 생긴다는 것을 발견했다.

 

이렇게 처음에 template_idx 1번 top과 5번 bottom이 로드되어 동시에 들어가는데,

5번을 넣을 때 1번이 들어가있는 templateModelList에서 추가로 수정해서 넣는게 아니라 1번이 들어가있지 않은 templateModelList에서 넣는 상황이 발생하여 덮어쓰기 당하여 1번 obj가 날라간다.

 

말이 이상해서 다시 정리하자면, 위 그림에서 template_obj의 경우 본래 둘 다 null인 상태에서 template_idx = 1의 template_obj에 Group object를 넣은 후, 다음에 template_idx = 5의 template_obj에 Group object를 넣는다.

둘 다 들어갈 것으로 예상하였지만, 실상은 둘다 null인 상태가 복제되어 하나는 template_idx = 1 에서 Group object를 넣고, 다른 하나는 template_idx = 5인 template_obj에 Group object를 넣으므로 각자 다른 idx의 template_obj가 null인 상태가 되어버린 것이다.

 

따라서 cloth_type별로 다른 model저장용 useState를 사용하는 것이 지금으로써는 편한 방법이다.

일단 모델을 다시 불러오지 못하는 문제를 useState에 담는 방법으로 해결할 수 있는지부터 먼저 알아보자.

 

...

 

 

알고보니 mesh에 가져왔던 useGLTF와 같은 load가 끊어져서 더이상 component에 추가되지 않는 모델의 경우 자동으로 visible을 false처리하여 보이지 않았던 것이다.

즉 A모델을 useGLTF로 load했다가 B모델을 load하면 A모델은 component에 없으므로 자동으로 visible false가 처리되는 것이다.

if(!progress.active){
    const modify_groupObj = groupObj
    modify_groupObj[cloth.adjust_value.cloth_type] = mesh
    setGroupObj(modify_groupObj)
    setLoadRerenderTrigger(!loadRerenderTrigger)
    mesh.visible = true
}

visible을 true처리하니까 잘 보인다.