Wired black appears when zoom out

Hi bros,
I’ve just got a very strange problem. The upper of my bed model goes black when I zoom model out. This problem occurs after I set the side attribute to THREE.doubleSide as a THREE.MeshPhongMaterial. I cannot set side back to single. THREE.doubleSide is a must for my other models. I’ve tested lights, but nothing changed. Is there any other way that I can figure out such a problem? cheers.
model upper:
image
after zoom out:
image

my code:

const loader: OBJLoader = new OBJLoader(manager);

const texture = textureLoader.load(textureUrl, function () {
// setloadingTexturePercent((index + 1) * 100 / length)
}, function () { }, function () { });

loader.load(objUrl, function (object) {
if (CURRENT_ONLY_RENDER_ID !== productId) {
updating = false
return
}
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide })
child.material.needsUpdate = true
child.material.transparent = true
}
});


},…)
lights:
public static initLights(scene: THREE.Scene) {
const light = new THREE.DirectionalLight(0xffffff);
light.intensity = 0.6
light.position.set(1, 1, 1);
scene.add(light);
const light2 = new THREE.DirectionalLight(0xffffff);
light2.intensity = 0.6
light2.position.set(-1, -1, -1);
scene.add(light2);
var ambientLight = new THREE.AmbientLight(0xcccccc, 0.6);
scene.add(ambientLight);
}

Can you demonstrate the issue in a live example? Do you also see the moiré pattern if you are not using textures?

Is it possible that your bed sheet is extremely close to (presumably) the mattress? If it is like 0.001" (1 mil) or something like that, then maybe threejs renderer is becoming confused on which geo/material to display when zoomed out. In production renderers like Octane, VRay, etc, we sometimes need to tweak Ray Epsilon (etc) to fix situations like this, but I am not sure if threejs has anything similar to overcome geo super close to one another, if that is indeed the case… If it is, maybe just kill the (mattress etc) geo beneath…

I finally solved this z-fighting problem.
I changed the near plane value from 1 to 100. All good.
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 100, 35000);
Cheers.

I’ve concerned about the flickering overlap issue. Then I set the offset of my materials, but it doesn’t work. quite nice suggenstion, cheers.