Three.js - 需要帮助才能实现此效果 - 附图片

问题描述

想达到这种效果,但不知道往哪个方向发展。

enter image description here

我曾尝试使用着色器使用多侧折射技术,但似乎无法真正达到效果。有没有更简单的方法

我将在背景中使用一个平面,使用着色器来实现选取框效果。这一切都很好,而且工作正常。但是,我需要该几何体具有某种磨砂玻璃效果,同时扭曲背景中的文本。会在几何体上使用某种材料,并添加透明,哪些参数有效?

希望得到指导

解决方法

这种效果(相对于更简单的alpha混合透明度)称为“透射”,磨砂部分称为“透射粗糙度”。 THREE.MeshPhysicalMaterial 是three.js 中执行此操作的首选方式,请参见以下示例:

https://threejs.org/examples/?q=transmission#webgl_materials_physical_transmission

然而,材质类型尚不支持折射,如上图所示的背景扭曲。 three.js#21000 包括一些关于未来支持的讨论。