[Three.js] 텍스처가 깜빡이는 문제

안녕하세요 :)

 

오늘은 아래와 같이 구름 텍스쳐를 실험하다가 각도가 변경되면 텍스처가 깜빡거리거나 부분이 잘려 보이는 문제가 발생했습니다.

위에 보시면 어색하게 잘려있는 구름이 보이실 겁니다.

위 원인은 각 객체가 가지고 있는 depth 정보 때문인데요, 객체들은 depth 정보를 이용해 해당 객체를 그릴지 말지를 결정한다고 합니다.

렌더링 최적화에는 도움이 되겠지만 위처럼 겹겹이 쌓여있는 형태의 객체에선 오히려 나타나야할 부분이 잘려버리는 문제가 발생하네요.

 

해결방법은 간단합니다. material을 생성할때 depthWrite 키값으로 false를 넘겨주면 됩니다.

    const material = new THREE.MeshLambertMaterial({
      map: textureMap,
      transparent: true,
      depthWrite: false,
    })

그러면 위처럼 카메라를 돌려도 텍스쳐가 깜빡이거나 잘리지 않습니다.