易现云图用户中心

Appearance

基于 XRFrame 在小程序中接入 ​

基于 XRFrame 实现云定位能力。

1. 引用插件 ​

Appid：wx3496c04a64a4ceab

在小程序工程的 app.json 中添加插件

javascript
"plugins": {
    "ezxrARSession": {
        "version": "2.1.0",
        "provider": "wx3496c04a64a4ceab"
    }
},

2. 更新说明 ​

  • V 2.1.0
    支持自动获取采集相机的位置用于测试体验

  • V 2.0.0
    基于 XRFrame 实现云定位能力。

3. 接入流程 ​

详见示例代码

4. 示例代码效果 ​

5. 总体流程 ​

由于 VPS 依赖 XRFrame 的画面和数据 IARRawData，先启动 XRFrame 内容，再启动 VPS 算法。
本文示例代码以提供的示例工程为参考！

5.1 启动内容 ​

引用 XRFrame 内容组件 ezxr-arcontent

javascript
/**
 * 1.内容启动
 */
async StartContent() {
    console.log(_LOG_TAG_, "StartContent");
    this.setData({ initContent: true }); // 启动内容
    this.arContentCpt = this.selectComponent("#ezxr-arcontent");
    this.arContentCpt.inner3dLoadedCall = () => {
        this.setData({ isCloudLocRecogTip: true }); // 打开扫描提示页
    };
    // ARTracker state false-detecting true-detected
    this.arContentCpt.innerARStateCall = (state) => {};
    this.arContentCpt.inner3dInitedCall = () => {
        this.StartVPS();
    };
    this.arContentCpt.inner3dUpdateCall = () => {
        const poseStatus = this.arEzxr.fnGetGlobalGLPose();
        if (!poseStatus) {
            this.data.framecount++;
            if (this.data.framecount >= 6000) this.data.framecount = 0;
            if (this.data.framecount % 60 === 0)
                console.warn("pose is null when updating cam pose");
            return;
        }
    this.arContentCpt.fnSetCameraPose(poseStatus.nodePose);
    };
},

5.2 启动算法 ​

引用 VPS 算法组件 ezxr-arsession

javascript
/**
 * 2.内容加载完成回调，启动算法
 */
async StartVPS() {
    console.log(_LOG_TAG_, "StartVPS");

    this.setData({ initSession: true }); // 启动算法
    this.arSessionCpt = this.selectComponent("#ezxr-arsession");

    // 首次定位成功回调
    this.arSessionCpt.fnSetOnFirstLocated((res) => {
      console.log("arSessionCpt location result first: ", res);
      // 关闭扫描提示页
      this.cloudLocRecog = this.selectComponent("#ezxr-cloudLocRecog");
      this.cloudLocRecog.fnSetCloudFirstLoced(()=>{
        this.setData({ isCloudLocRecogTip: false });
      });
      this.arContentCpt.fnFirstLocated();
    });

    // 每一次定位回调
    this.arSessionCpt.fnSetOnLocated((res) => {});

    this.locationOption = { isRecogOnce: false };
    await this.arSessionCpt.fnStart(this.data.location, this.locationOption);

    this.arEzxr.fnSetRequestLocUrl(this.data.contentCloudLocUrl);
    this.arEzxr.fnSetRequestLocStatus(true); // 开始云定位
},

5.3 必要接口说明 ​

5.3.1 内容引擎回调 ​

  • inner3dLoadedCall : 场景内容成功加载回调（加载进度回调 onInner3dLoading）
  • inner3dInitedCall ：场景内容初始化完成回调
  • innerARStateCall : XRFrame 算法跟踪状态回调
  • inner3dUpdateCall : 渲染引擎更新回调（每帧更新）

5.3.2 算法引擎回调 ​

  • fnStart : 算法组件接口，启动算法。退出算法跟随组件生命周期，无须调用。
  • fnSetRequestLocUrl ：算法接口，设置云定位地址
  • fnSetRequestLocStatus : 算法接口，可传参，true 发起云定位请求，否则停止云定位请求
  • fnGetGlobalGLPose : 算法接口，获取定位的融合结果，XRFrame 渲染引擎使用返回结构中的 nodePose
  • PoseUpdate : 算法接口，将 XRFrame 的数据传递给算法引擎

6. 建议说明 ​

1.使用前请与我司商务确认插件版本号；
2.AR 内容交互实现建议写在 ARContent.js;
3.交互内容实现是基于 XRFrame 渲染引擎，开发详见微信相关官方文档。