Creating Soft, Shaded White Walls in Three.js

To achieve the soft, nicely shaded white wall look in your house model, you'll need a combination of the right material and lighting setup. Based on the image you shared, here's what I recommend:

Material Selection

For white walls with soft shading, MeshStandardMaterial is your best option:

JAVASCRIPTCopied
const wallMaterial = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.9,
  metalness: 0.0,
});

The high roughness value (0.9) will help diffuse the light and create that soft look, while keeping metalness at 0 ensures it doesn't have any reflective qualities.

Lighting Setup

A combination of lighting types will help achieve the soft shadows:

JAVASCRIPTCopied
// Ambient light for base illumination
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

// Main directional light (like sunlight)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(1, 1.5, 1);
directionalLight.castShadow = true;
// Configure shadow properties
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
directionalLight.shadow.bias = -0.0001;
scene.add(directionalLight);

// Add a hemisphere light for more natural lighting
const hemisphereLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 0.5);
scene.add(hemisphereLight);

Shadow Configuration

Make sure to enable shadows in your renderer:

JAVASCRIPTCopied
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Soft shadows

And for your house model:

JAVASCRIPTCopied
// Assuming 'house' is your loaded model
house.traverse((child) => {
  if (child.isMesh) {
    child.material = wallMaterial;
    child.castShadow = true;
    child.receiveShadow = true;
  }
});

Additional Tips

1. The model's geometry doesn't necessarily need more triangulation unless you're seeing faceted shading. The soft look comes primarily from lighting and materials.

2. Consider adding a subtle MeshPhysicalMaterial if you want more control over the surface properties:

JAVASCRIPTCopied
const wallMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  roughness: 0.9,
  metalness: 0.0,
  reflectivity: 0.1,
  clearcoat: 0.05,
});

3. If the scene is still too bright, reduce the intensity of your lights rather than changing their positions.

4. For even softer shadows, you might want to experiment with area lights, though they're more computationally expensive.

The key to achieving this look is balancing the ambient, directional, and hemisphere lights while ensuring your materials have the right properties to interact with that lighting in a soft, diffuse way.