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 );

我在下面的演示中增强了MeshNormalMaterialvia onBeforeCompile().如果物体靠近相机,我们的想法是逐渐降低不透明度.您可以使用变量控制此转换过程f.较高的值意味着对象很快就会变得透明.