Three.js 에서 카메라가 가까이 다가가면 특정 부분만 사라지는 경우

Three.js를 사용한 3D 공간에 캐릭터를 표시했습니다.
카메라를 이리저리 움직이며 보던 중에 가까이 접근하면 머리카락이 사라지는 증상을 알게 되었습니다.

이 문제를 찾아보기 위해 구글에 검색을 하니 비슷한 질문을 찾게 되었습니다.

https://discourse.threejs.org/t/mesh-disapear-when-camera-close/2914

https://stackoverflow.com/questions/50501392/mesh-disapear-when-camera-close

보여지고 있는 object3D 객체의 "frustumCulled"값에 false를 넣으면 됩니다.
카메라에 보이지 않아도 렌더링 대상에 넣어주는 옵션으로 보입니다.

https://threejs.org/docs/index.html#api/en/core/Object3D.frustumCulled

저는 mesh에만 적용하여 사용 했는데 소스는 다음과 같습니다.

object3D.traverse(function (obj) {
    if (obj.isMesh) {
        obj.frustumCulled = false;
    }
});

Object3D.traverse() 를 사용해 내부를 돌면서 mesh만 골라 "fustumCulled"를 설정하는 겁니다.

이렇게 하니 문제가 해결되었습니다. 이 문제는 애니메이션이 있는 대상에서 자주 일어난다고 합니다.

댓글