ExtrudeBufferGeometry does not show well if depth is less than 1

Questions
1

Hello,

In my scene I have a planeBufferGeometry (yellow) and the extrudeBufferGeometry (green). If the ExtrudeBuffer

This is code for ExtrudeBufferGeometry:

var extrudeSettings = {
      steps: 1,
      depth: 0.5,
      bevelEnabled: false
    };

    var extrudeGeom = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
    extrudeGeom.groupsNeedUpdate = true;
    var pavement = new THREE.Mesh( extrudeGeom, [
      new THREE.MeshLambertMaterial({color: ColorPavement1, transparent: true, opacity: 1}),
      new THREE.MeshLambertMaterial({color: ColorPavement2, transparent: true, opacity: 1})
    ] ) ;

    pavement.matrixWorldNeedsUpdate = true;
    pavement.name = "Pavement";
    pavement.rotation.x = Math.PI * - 0.5;
    pavement.geometry.attributes.position.needsUpdate = true;
    pavement.matrixAutoUpdate = true;
    pavement.castShadow = true;
    pavement.receiveShadow = true;

I noticed that if depth is small (less than one) in some camera positions I am seeing this:

Screenshot 2021-06-01 at 13.02.42
Screenshot 2021-06-01 at 13.02.421292×1032 22.8 KB

Is there a way to overcome thiss issue?

Many thanks!
Mirko

2

It looks like Z-fighting, you can mitigate this issue by narrowing your camera frustum ( higher near, lower far )

3

Hello,

@felixmariotto thanks for the info!
In this case, the solution was combination of putting depthWrite: false in the material of the ExtrudeBufferGeometry and setting properties of the camera (near: 1, far: 1000).

Now it works!

Mirko