Inconsistency of view between 3d model and plane when rotating 3d model

Questions
1

Hi

I have drawn a plane on the 3d model, which looks fine but When the model is viewed from certain angles(especially while rotating), the view would cut through the plane and display the 3D model (as displayed in the image below).
Here is the sample code that I am using to draw the shape(plane) on the model.

const shapeMesh = new THREE.Mesh(new THREE.ShapeBufferGeometry(shape),
      new THREE.MeshStandardMaterial({
        color: 0x546b95,
        wireframe: false,
        opacity: .5,
        transparent: true,
      }));

image
image828×385 70.5 KB

What is causing this inconsistency and can it be remedied?

2

This glitch looks like z-fighting. Meaning the depth values of the house and the plane are nearly equal and because of floating point inaccuracies sometimes one sometimes the other are considered to be closer to the camera.

You maybe can mitigate the issue by using a similar material configuration like in webgl_decals. Check out how polygonOffset and polygonOffsetFactor are used.