初识xr-frame识别追踪渲染3D模型
初识xr-frame AR识别追踪渲染3D模型
- 初识xr-frame识别追踪渲染3D模型
-
- 1. 云识别配置
- 2. 小程序开发配置
- 3. wxml文件
- 4. ts文件（不完整，请下载sample查看完成代码）
- 5. 需要注意的地方
初识xr-frame识别追踪渲染3D模型
微信的3D引擎xr-frame发布已经有一段时间了，官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/xr-frame/。
我这段时间有空，正好研究下，小程序中可以直接使用，不用另外引入引擎包，相比threejs等第三方包，可以减少不小包体积。
xr-frame内置AR系统支持，AR追踪器ARTracker是AR系统的一部分，提供了一种非常简单的方式，在特定的识别模式下识别出图像或者物体，对其进行跟随。
文档上没有找到使用多识别图片使用方法，所有使用云识别功能，云识别使用的无间科技的技术，官方文档地址：https://developer.wujianar.com/iss/search.html。
使用例子：https://gitee.com/wujianar/wujianar-wx-mini-sample。
1. 云识别配置
使用无间科技的开发中心创建一个云识别库，上传识别图与配置关联信息，本次开发用到的如下：
识别图：
关联信息：
{"modelUrl":"https://wujianar-cdn.oss-cn-hangzhou.aliyuncs.com/ardemo/models/kl.gltf","scale":0.07}
在云别库中的图库密钥中选择客户端密钥，选择一个有效期，并把生成的Token复制下来，云识别需要用这个来认证，替换app.ts中的Token就行。
2. 小程序开发配置
将域名 iss-api.wujianar.cn 加入到request合法域名中，及将 wjasset.oss-cn-hangzhou.aliyuncs.com 加入到downloadFile合法域名中。在开发的时候也可以勾选不检测域名。
3. wxml文件
xr-model/index.wxml
<xr-scene ar-system="modes:Marker" id="xr-scene" bind:ready="handleReady" bind:ar-ready="handleARReady" bind:tick="handleTick">
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
<xr-asset-load wx:if="{{assetId != ''}}" type="gltf" asset-id="{{assetId}}" src="{{modelUrl}}" />
xr-assets>
<xr-node>
<xr-ar-tracker wx:if="{{markerUrl != ''}}" mode="Marker" src="{{markerUrl}}" id="arTracker" bind:ar-tracker-switch="handleTrackerSwitch">
<xr-gltf wx:if="{{assetId != ''}}" node-id="player" model="{{assetId}}" scale="{{scale}} {{scale}} {{scale}}" anim-autoplay />
xr-ar-tracker>
<xr-camera id="camera" node-id="camera" position="0.8 2.2 -5" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera>xr-camera>
xr-node>
<xr-shadow id="shadow-root">xr-shadow>
<xr-node node-id="lights">
<xr-light type="ambient" color="1 1 1" intensity="1" />
<xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />
xr-node>
xr-scene>
4. ts文件（不完整，请下载sample查看完成代码）
xr-model/index.ts
云识别部分
# 获取场景的内容，发送到云识别服务识别
const base64 = this.scene.share.captureToDataURL({ type: 'type', quality: 0.7 });
wuJianAR.search({ image: base64.split('base64,').pop() }).then(msg => {
console.info(msg);
// code为200时识别到目标，非200时为未识别到目标
if (msg.code !== 200) {
wx.showToast({ title: `未识别到目标`, icon: 'none', duration: 1000 });
return;
}
this.triggerEvent('searchSuccess', msg.data, {});
wx.showToast({ title: `识别到目标：${msg.data.name}`, icon: 'none', duration: 1000 });
this.showModel(msg.data);
}).catch(err => {
console.warn(err);
});
设置xr-frame追踪部分
showModel: async function (data: any) {
let brief: ModelSetting;
try {
brief = JSON.parse(data.brief);
} catch (e) {
console.error(e);
wx.showModal({
title: '提示',
content: '解析关联数据错误',
showCancel: false,
});
return;
}
if (!brief.modelUrl) {
wx.showToast({ title: '模型地址错误', icon: 'error' });
return;
}
this.setData({
markerUrl: data.image,
assetId: data.uuid,
scale: brief.scale,
modelUrl: brief.modelUrl,
});
}
5. 需要注意的地方
使用Nightly版本的工具
xr-frame目前仍然是是Beta版本，需要Nightly版本的工具，特定客户端（8.0.29以上）和基础库（2.28.1以上），更多限制请见限制和展望。
xr-model/index.json文件中要设置xr-frame，不然是不会加载xr-frame引擎的。
{
"component": true,
"renderer": "xr-frame"
}
miniprogram/app.json文件是增加一条 “lazyCodeLoading”: “requiredComponents”，如
{
"pages": [
"pages/index/index",
"pages/xr-model/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "无间WebAR 微信小程序Sample",
"navigationBarTextStyle": "black"
},
"lazyCodeLoading": "requiredComponents",
"style": "v2",
"sitemapLocation": "sitemap.json",
"useExtendedLib": {
"weui": true
}
}
｀｀｀
## 6. 最终效果
[video(video-NSdCj49j-1682153593791)(type-csdn)(url-https://live.csdn.net/v/embed/291965)(image-https://video-community.csdnimg.cn/vod-84deb4/0eeef810e0e871ed83886633b79f0102/snapshots/d6bfb97cc1af4948b29b0a3f65c0792a-00002.jpg?auth_key=4835752286-0-0-7a2e8bfa2ae35fc83112da8f349a3b53)(title-微信小程序xr-frame开发AR追踪功能)]
sample下载 https://gitee.com/wujianar/wujianar-wx-mini-sample