title: Is it possible to let Fog interact with the material's opacity?
body: <p>I am working on a project that displays buildings. <strong>The requirement is to let the building gradually fade out (transparent) based on the distance between the camera and the buildings.</strong> Also, this effect has to follow the camera's movement.</p>
  
  <p>I consider using <code>THREE.Fog()</code>, but the Fog seems can only change the material's color.
  <a href="https://i.stack.imgur.com/j4ilC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j4ilC.png" alt="Buildings with White Fog enabled"></a>
  Above is a picture of the building with white fog.</p>
  
  <ul>
  <li>The buildings are in tiles, each tile is one single geometry (I merged all the buildings into one) using
  <code>
  var bigGeometry = new THREE.Geometry();
  bigGeometry.merge(smallGeometry);
  </code></li>
  <li>The purple/blue color thing is the ground, and <code>ground.material.fog = false;</code>. So the ground won't interact with the fog.</li>
  </ul>
  
  <p>My question is: </p>
  
  <ul>
  <li>Is it  possible to let the fog interact with the building's material's opacity instead of color? (more white translate to more transparent)</li>
  <li>Or should I use Shader to control the material's opacity based on distance to the camera? But I have no idea of how to do this.</li>
  <li>I also considered adding <code>alphaMap</code>. If so, each building tile have to map an alphaMap and all these alphaMap have to interact with the camera's movement. It's going to be a tons of work.</li>
  </ul>
  
  <p>So any suggestions?</p>
  
  <p>Best Regards,
  Arthur</p>