three.js对象淡入/淡出或应用不透明度

Question

我正在使用three.js进行图形化Web项目。

我有很多圈子，它像这样散布开来。

我想知道，如果物体和相机之间的距离越来越远，

对象的不透明度可以降低吗？（或淡出）

如果距离越来越近，请将对象的不透明度设置为更高（或淡入）

我在docs（https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene）中进行了搜索，但是没有明确的说明。

对此有什么解决办法吗？

谢谢。

Answer 1

使用默认材质three.js时，无法在相机靠近物体时更改不透明度。但是，通过以下代码来增强材料的片段着色器以达到所需的效果并不困难：

gl_FragColor.a *= pow( gl_FragCoord.z, f );

在下面的演示中，我通过MeshNormalMaterial增强了onBeforeCompile()。想法是，如果物体靠近相机，则逐渐降低不透明度。您可以使用变量f控制此过渡过程。较高的值表示对象将很快开始变得透明。

https://jsfiddle.net/f2Lommf5/13924/

Answer 2

我制作了一个演示，您可以定义一个函数来计算相机和网格之间的不透明度，距离越近越高，这是我的公式：

opacity = -1/400*distance

您还需要将透明设置为true，并在每帧中更新不透明度。 这是我的example。