javascript - Three.js 雾，最大不透明度

Question

我正在尝试:

我正在构建一个包含地形的轻量级 GIS 应用程序。我想补充的一件事是大气阴霾。

我当前的代码:

(请原谅我的代码，我有多个场景)

  fogColor = new THREE.Color(0x7EC0EE);
  this.scenes[name].background = fogColor;
  this.scenes[name].fog = new THREE.Fog(fogColor, 250, 2000);
  //alternatively:
  this.scenes[name].fog = new THREE.FogExp2( fogColor, .001 )

遇到的问题:

当我靠近地面时，Fog 和 FogExp2 都适用于我的应用程序中的比例单位。然而，当将相机移到离地面更远的地方并向下看时，地球最终变成了 100% 的蓝色，因为它被雾设置遮住了。

我的问题:

有没有办法对雾应用最大不透明度？

我希望地形在远处保持朦胧，但不会完全被雾作为纯色遮挡。我在想我可以计算出视野中最远的物体，并在每次相机变化时调整雾设置，但我不确定我是如何或是否想得太多了。我想根据相机和物体之间的“空气”量来计算雾，并且永远不会超过一定的雾不透明度。这在着色器中做得更好吗？

Answer 1

无法将最大不透明度应用于雾，但您可以更改雾的 near and far parameters在飞行中。例如:

var origin = new THREE.Vector3(0, 0, 0);

update() {
    var dist = camera.position.distanceTo(origin);
    fog.far = 2000 + dist;
}

我不确定您要处理的是哪种单位，因此您可能需要尝试一下计算dist 的方式。使用这种方法，您离 0, 0, 0 越远，雾就会到达越远的地方。

使用 FogExp2，您可以尝试修改 .density property .