代码如下,问题在注释中(感谢🙏):
<xr-scene ar-system="modes:OSD" >
<xr-assets bind:loaded="handleAssetsLoaded">
<xr-asset-material asset-id="mat" effect="simple" uniforms="u_baseColorFactor: 0.8 0.6 0.4 0.7" states="alphaMode:BLEND" />
</xr-assets>
<xr-asset-load type="texture" asset-id="xxxt" src="https://x x x.jpeg" />
<xr-node>
<xr-ar-tracker
mode="OSD" src="https://xxx.jpeg"
>
<!-- 这里的rotation 第一个值,只能设置为 <= 0 的数值,> 0时就不显示了 -->
<!-- 设置为 -90 的话,平面上的字就倒立了 -->
<xr-mesh geometry="plane" material="mat" rotation="-90 0 0" uniforms="u_baseColorMap: xxxt" />
</xr-ar-tracker>
</xr-node>
<xr-camera clear-color="0.4 0.8 0.6 1" background="ar" is-ar-camera />
</xr-scene>
默认的材质是会进行面剔除的,会剔除到背面,所以理论上 rotation 旋转 > 0 时,应该就是显示了背面,然后背面被剔除了。
可以手动设置渲染状态,关闭面剔除。
<!-- 添加渲染状态 states="cullOn: false" 去除面剔除 --> <xr-mesh geometry="plane" material="mat" rotation="-90 0 0" uniforms="u_baseColorMap: xxxt" states="cullOn: false" />
rotation="90 180 0" 就可以正方向的展示文字了
这里理论上最好需要结合一些渲染状态的前置知识。这部分感觉后续可以单独抽出来,方便大家理解~
目前可以结合以下两部份来理解
材质拥有的渲染状态列表
https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/render/material.html
以及使用材质的默认状态,如果 standard 的默认状态
https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/builtin/effect-standard.html