ThreeJS Material Issue Analysis

Based on your description and code, the issue with the bed surface turning black when zooming out is likely related to face normals and lighting interactions when using THREE.DoubleSide with MeshPhongMaterial.

Possible Causes and Solutions

1. Face Normal Direction

When using THREE.DoubleSide, both sides of faces are rendered, but the lighting calculation can still be affected by the face normals. The black appearance suggests the normals might be flipped or inconsistent.

Try adding this to your code after loading the model:

TYPESCRIPTCopied
object.traverse(function (child) {
  if (child instanceof THREE.Mesh) {
    // Existing material setup
    child.material = new THREE.MeshPhongMaterial({ 
      map: texture, 
      side: THREE.DoubleSide 
    });
    child.material.needsUpdate = true;
    child.material.transparent = true;
    
    // Add this to compute proper face normals
    child.geometry.computeVertexNormals();
    child.geometry.computeFaceNormals();
  }
});

2. Material Properties

Try adjusting these additional properties on your material:

TYPESCRIPTCopied
child.material = new THREE.MeshPhongMaterial({ 
  map: texture, 
  side: THREE.DoubleSide,
  shininess: 30,
  flatShading: false,
  dithering: true
});

3. Alternative Material Type

Consider using MeshStandardMaterial which often handles lighting better:

TYPESCRIPTCopied
child.material = new THREE.MeshStandardMaterial({ 
  map: texture, 
  side: THREE.DoubleSide,
  roughness: 0.7,
  metalness: 0.2
});

4. Z-Fighting Solution

The issue might be related to z-fighting when zooming out. Try adjusting the camera's near and far planes:

TYPESCRIPTCopied
camera.near = 0.1;
camera.far = 1000;
camera.updateProjectionMatrix();

5. Material-Specific Solution

If you need DoubleSide for other models but not this one, you could apply different materials based on the model:

TYPESCRIPTCopied
object.traverse(function (child) {
  if (child instanceof THREE.Mesh) {
    // Check model name or other property to identify the bed
    if (child.name.includes('bed') || /* other condition */) {
      child.material = new THREE.MeshPhongMaterial({ 
        map: texture, 
        side: THREE.FrontSide  // Use FrontSide for the bed
      });
    } else {
      child.material = new THREE.MeshPhongMaterial({ 
        map: texture, 
        side: THREE.DoubleSide  // Use DoubleSide for other models
      });
    }
    child.material.needsUpdate = true;
    child.material.transparent = true;
  }
});

Try these approaches to diagnose and resolve the issue with your bed model.