Component:
<xr-scene ar-system="modes:Marker" bind:ready="handleReady">
<xr-assets wx:for="{{trackers}}" wx:key="id" bing:loaded="handleAssetsLoaded">
<xr-asset-load type="gltf" asset-id="{{item.modelName}}" src="{{item.modelSrc}}" />
</xr-assets>
<xr-node id="container" wx:if="{{loaded}}" wx:for="{{trackers}}" wx:key="id">
<xr-ar-tracker mode="Marker" src="{{item.trackerSrc}}">
<xr-gltf node-id="{{item.modelName}}" model="{{item.modelName}}" />
</xr-ar-tracker>
</xr-node>
<xr-light type="ambient" color="1 1 1" intensity="1" />
<xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow />
<xr-camera clear-color="0 0 0 1" background="ar" is-ar-camera />
</xr-scene>
Component (TS):
handleAssetsLoaded:function(){
console.log("Done")
this.setData({
loaded:true
})
}
Data :
const trackers = [
{id:0,modelName:"test1",
trackerSrc:"https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/portalImage.jpg",
modelSrc:"https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/damage-helmet/index.glb"},
{id:1,modelName:"test2",
trackerSrc:"https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/wxball.jpg",
modelSrc:"https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb"},
]
this.setData({
trackers
})
问题:真机调试时,无报错,也没有打印“Done”。想了解XR-Frame怎么做动态加载tracker和资产
这部分完整解释会比较复杂,核心就是 xr-assets-load 不能动态改属性;需要保证资源注册后,再去使用对应的 glTF 等资源。
可以参考 通用模版 - loading / 多tracker模版
提供动态资源加载和同一类型下动态tracker控制的官方案例用于参考,会比较清晰。
https://github.com/dtysky/xr-frame-demo