Clipping of meshes when rotating

Question

I made a model composed from some meshes in three.js but when I move my camera using OrbitControls, it seems that some of my meshes clip. Here is the render I have:

By searching on the Internet, I found some solution mentionning the depthWrite of the material to set to false. In this situation, all my elements are displayed but the 3D is broken (normal since this feature seems to be mainly designed to overlay elements in a 2D rendering). The render with the depthWrite disabled:

Here is a minimal example of the issue I encounter: https://codepen.io/theogiraudet/pen/WNZKPXx?editors=0110

Thank for your help!

Answer 1

In the createElement function, use this setup for material:

  const material = new THREE.MeshBasicMaterial({
    map: createTexture(url),
    alphaTest: 0.5
  });