EZXR 开发者中心

Appearance

ezxrARSession-3dof 算法插件 ​

3DoF 算法（也叫 imu 算法）是利用手机设备的姿态同步并更新渲染相机的位姿，实现手机与虚拟内容的交互的能力。

插件申请和示例代码 ​

为了快速对插件进行基础的了解和认识，请直接下载示例 Demo，使用微信小程序开发工具打开，修改 AppId 为已申请插件授权的 AppID，替换绑定了上述 AppID 的内容资源，然后在真机扫码预览效果。

  • 插件权限申请

    • 首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件，通过 AppID** [wx33b4f056bf74d649]** 查找插件并添加。
    • 或者在微信小程序开发者工具中，导入示例 Demo 以后，等开发工具提示需要插件权限时，点击『申请』

  • 内容资源替换

    • 第一步，在洞见 AR-World 小程序能力平台创建 3DoF 跟踪 - 沉浸环绕内容
    • 第二步，参考接入示例接入

  • 示例 Demo

ezxrARSession-3dof-demo.zip

更新日志 ​

20230726 v1.1.1 
    优化 3DoF 效果 
 
20230302 v1.1.0 
    支持 unity 和 threejs Web 双编辑器  
    支持洞见 AR-World 小程序能力平台配置 
    支持拍照

使用说明 ​

快速使用插件请直接使用代码示例 Demo，后续内容开发建议以代码示例 Demo 为基础开发。

此说明更适用于帮助理解。

3.1 添加插件 ​

javascript
"plugins": {
    "ezxrARSession": {
        "version": "1.1.1",
        "provider": "wx33b4f056bf74d649"
    }
},

3.2 引用插件 ​

此插件提供的页面入口地址为：plugin://ezxrARSession/ARSession

javascript
//在page或component的js文件中添加
const plugin = requirePlugin('ezxrARSession')

//在page或component的json文件中添加
"usingComponents": {
    "ezxr-arsession": "plugin://ezxrARSession/ARSession"
}

//在page或component的wxml文件中添加
<ezxr-arsession id="ezxr-arsession"></ezxr-arsession>

 this.ezxr = new plugin.AREzxr(); // 同下文中this.arEzxr

3.2 提供方法 ​

插件对外提供 ARSession 组件和 AREzxr 方法库。

【ARSession 组件】

方法名称方法说明入参与返回
fnStart

算法启动

trackerType：跟踪类型，填1；

locationType：定位类型，填0；

trackerOption：跟踪参数，有 renderer（渲染引擎renderer）

【AREzxr 方法库】

方法名称方法说明入参与返回
checkARSupport查询是否支持 AR

返回：{

arSupport, // 当前设备是否支持AR体验

camFov //需要传递给渲染引擎

}

fnWxRequestRes

获取内容平台配置

入参如下：

cid：内容平台 cid（同内容id）

key：内容平台环境，development（测试）/production（线上）

返回如下：

contentId：内容ID

contentName：内容名

contentPackageUrl：内容包资源链接

contentType：内容类别，3-沉浸式环绕

editorType： 1-web 编辑器 2-unity 编辑器

PoseUpdate获取 GL 坐标 pose算法更新。

fnGetGlobalGLPose

获取 ezxrGL 坐标 pose

获取算法坐标。

返回:{ ezxrPose,pose,timestamp,spaceUncertainty,timeUncertainty}

fnTakephoto拍照返回：临时存储路径

3.3 接入示例 ​

3.3.1 ARSession 组件及方法使用示例 ​

组件引用：

javascript
//在page或component的json文件中添加
"usingComponents": {
    "ezxr-arsession": "plugin://ezxrARSession/ARSession"
}
//在page或component的wxml文件中添加
<ezxr-arsession id="ezxr-arsession"></ezxr-arsession>
//在page或component的js文件中添加
this.arSessionCpt = this.selectComponent('#ezxr-arsession');

组件（this.arSessionCpt）提供方法使用：

javascript
//在page或component的js文件中添加本模块示例

_// 获取渲染引擎的renderer，此处仅为示例，可从代码示例demo中查看this.arContentCpt的引用_
// 需要确保在渲染引擎初始化成功之后 todo
_const wcengine = this.arContentCpt.fnGetWCEngineRenderer(); _
// 算法启动, 可渲染背景;
const onStarted = () => {   
    console.log("Tracker onStarted");
};
// 算法初始化完成, 可获得camera pose;
// 初始化后同步内容和算法fov, 同时获取pose开始显示内容;
const onRecogSuccess = () => {  
    console.log("Tracker onCompleted");
    // 获取算法Fov, 设置内容渲染fov
    const camFov = this.ezxr.fnGetCameraFov();
    this.arContentCpt.fnSetCameraFov(camFov);
}
_const trackerOption = {
    renderer: wcengine,
    onStarted: onStarted,
    onRecogSuccess: onRecogSuccess,
__};_
//算法启动，要求先启动内容后再启动算法
const trackerType = this.data.TRACK_TYPE.DOF_3;
this.arSessionCpt.fnStart(trackerType, trackerOption);;

3.3.2 AREzxr 方法使用示例 ​

AREzxr 引用：

javascript
//在page或component的js文件中添加
const plugin = requirePlugin('ezxrARSession')
this.ezxr = new plugin.AREzxr();

AREzxr 提供方法使用：

javascript
//在page或component的js文件中添加

// 从内容平台获取资源
const response = await this.ezxr.fnWxRequestRes(7907, 'development'); // 测试环境
console.log('content response', response);

// 获取设备支持&获取内容配置
const ins = await this.ezxr.checkARSupport();
console.log('ARSupport', ins);
javascript
// 在渲染引擎的js文件Update中添加
// 渲染更新
this.ezxr.PoseUpdate();
const poseStatus = this.ezxr.fnGetGlobalGLPose();

// 如使用非易现Insihgt渲染（如threejs-miniProgram），则获取标准的GLPose；对应web编辑器
this.contentCpt.fnSetCameraPose(poseStatus.pose);
// 如使用易现Inisht渲染，则获取ezxrGLPose。对应unity编辑器
this.contentCpt.fnSetCameraPose(poseStatus.ezxrPose);
javascript
// 拍照
const path = await this.ezxr.fnTakephoto();
console.log(" img.takephoto ", path)