new1cm

Three.js를 사용하여 대상을 표현하는데 자글거리는 증상이 나옵니다. 카메라를 이동해서 가까이 가면 증상이 나오지 않지만 멀리 떨어지면 나오는 증상이었습니다. 대상을 구성하는 요소들이 겹치면서 자글거리는 것 같다고 생각이 들었지만 어떻게 처리해야 하는지 알 수 없었습니다. 그러다가 다음과 같은 글을 찾았습니다. https://github.com/jeromeetienne/AR.js/issues/401 댓글에 나와있는 답변에서 아래와 같은 내용을 봤습니다. var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true }); 공식 문서에서 "WebGLRenderer" -> "logarithmicDepthBuffer" 항목을 찾아보니 다음과 같은 설명과 예시를 볼 수 있었습니다. https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer ( ctrl + f -> logarithmicDepthBuffer 검색 ) https://threejs.org/examples/#webgl_camera_logarithmicdepthbuffer 이 옵션은 깊이에 관련된 옵션으로 보였고, 옵션을 적용하니 문제는 쉽게 해결되었습니다.

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"를 설정하는 겁니다. 이렇게 하니 문제가 해결되었습니다. 이 문제는 애니메이션이 있는 대상에서 자주 일어난다고 합니다.