Three.js 雾可以应用于区域而不是与相机的距离吗？答案

【问题标题】：Three.js Can fog be applied to area rather than distance from camera?Three.js 雾可以应用于区域而不是与相机的距离吗？
【发布时间】：2014-10-27 20:52:01
【问题描述】：

想象一个场景，您有一个非常大的 THREE.PlaneGeometry 来模拟地板，并且您在随机位置添加了一个相机。

如果我手动调整雾的近距和远距值，我可以以某种方式隐藏飞机的外部，从而产生无限的印象。到目前为止，一切顺利。

问题是，如果我让我的相机在场景中飞到飞机内的随机位置怎么办？如果随机点离飞机的外侧足够近，雾就不会掩盖飞机的末端，因为雾总是基于相机的位置。

所以我的问题是，只有当你足够接近飞机的极限时，我们才能实现雾效果？

【问题讨论】：

这是一个jsfiddle 来说明我的想法。
用你的相机移动飞机怎么样，这样相机总是在飞机的中心？
如果我这样做，虽然相机和飞机在移动，但就像什么都没发生一样对吗？它的目的是让它看起来像你在一个地形上飞行，但如果你超出界限，你就会进入一个“雾”区域。我想创建一个 PointCloud 粒子系统，离场景原点越远，粒子系统就越密集……但这在 GPU 上太多了，对吧？
您的地形几何体或材质可能会重复（或者您可以使其无缝），因此如果相机离原点太远，您可以将地形几何体移动重复图案的倍数。
我已经在这样做并在移动时交换纹理，但我确实有有限数量的纹理可以制作更大的图像。图片谷歌地图例如。它只是围绕中心点的半径，您可以在其中飞过。无论如何，我认为我的问题得到了否定 :) 只是远近都可以在雾中改变。感谢所有建议。

标签： javascript three.js

【解决方案1】：

我对雾系统的工作原理没有足够深入的了解，所以如果有人可以纠正我，那就太棒了。

我猜雾只在相机上渲染，你不能将它应用到，比如说，一个对象，或者你不能创建一个雾对象（例如由雾制成的立方体），除非你使用可以使对象看起来像的着色器“雾”，但是如果您进入对象，您将无法再看到雾（或者它不会按预期呈现）

但是，您可以做的是根据您的相机位置动态更改雾渲染，您离中心的距离越远，雾渲染离相机越近。这很容易通过做一个简单的减法（X - 到平面中心的距离）来实现，其中 X 等于相机可以达到的最大距离。

到 XY 平面中心的距离也很容易，如果你将平面中心定位在 0,0，你会自动知道你的相机所在的 X 和 Y 坐标。然后你可以计算相对于 X 和 Y 轴的斜边（见下面我的 gif）。

【讨论】：