uniApp开发XR-Frame微信小程序 | 设置透明贴图

我们在制作XR-Frame场景的时候。经常会遇到用一些透明的贴图作为材质的情况，例如花草，一些镂空的装饰等物品。

前面的文章我们，我们学习过

几何体材质的基础运用https://blog.csdn.net/weixin_39318421/article/details/137097007?spm=1011.2415.3001.5331

我们先来看一下，按照平常的方法设置贴图

<xr-asset-load type="texture" id="girl" asset-id="girl" 
src="https://mmbiz.qpic.cn/sz_mmbiz_png/9pEzDTVZpgzRMglicGjKOhG1u0WM8QfLzYiajzuZ1kCCtgELfNESyEUJ2v74IE2akKhmKu2wC5bBuHcR2fVhPW9g/640?wx_fmt=png&amp;from=appmsg" /><xr-mesh 
scale="3 3 3" 
geometry="cube" 
uniforms="u_baseColorMap:girl"></xr-mesh>

我们加载了一张卡通小女孩的图片，然后将资源 id 设置给几何体的 uniforms 属性中 u_baseColorMap

这是一个半透明的PNG图片，当把它设置给几何体后，场景中的效果是下面这样的：

显然，这个场景是不符合我的要求的，我需要的是它呈现出半透明材质的效果。

要实现这个需求，我们就要用到 xr-asset-material 标签。

在加载了图片作为资源后，我们先创建一个材质：

<xr-asset-load type="texture" id="girl" asset-id="girl" 
src="https://mmbiz.qpic.cn/sz_mmbiz_png/9pEzDTVZpgzRMglicGjKOhG1u0WM8QfLzYiajzuZ1kCCtgELfNESyEUJ2v74IE2akKhmKu2wC5bBuHcR2fVhPW9g/640?wx_fmt=png&amp;from=appmsg" /><xr-asset-material 
asset-id="mat-girl" 
effect="standard" 
uniforms="u_baseColorMap:girl" 
states="alphaMode:BLEND" 
renderQueue="2500" /><xr-mesh
scale="3 3 3" 
geometry="cube" 
material="mat-girl">
</xr-mesh>

这里注意 material 标签中的一些参数的配置，创建好材质后，我们给几何体设置材质

material="mat-girl"

再来看一下模拟器中的显示效果。

至此，几何体配置透明贴图的方法就实现了。

源码中包含本片文章的全部代码，大家可以参考学习