小程序AR

关于微信小程序的AR人脸插件

插件链接

注意：

此插件2.1.0及以上版本，需要小程序基础库2.14.0及以上版本才支持。如果需要更低版本基础库支持，请使用2.0.x版本的插件
如果使用2.0.x版本的插件，同时必须再添加一个名为TensorFlowJS的小程序插件:tfjsPlugin
此插件是付费插件

app.json配置内容

"plugins": {
    "tfjsPlugin": {
      "version": "0.0.8",
      "provider": "wx6afed118d9e81df9"
    },
    "face-ar": {
      "version": "2.1.4",
      "provider": "wx9f294c784497a4e9"
    }
}

face-ar 组件使用

page.json

{
    "usingComponents": {
      "face-ar": "plugin://face-ar/face-ar"
    }
}

page.wxml

<face-ar class="face" id="ar" camera-position="front"  bind:error="error" bind:ready="ready" />

1. camera-position 指定初始化时打开的摄像头方向(front/back)。
2. error插件内发生错误，或camera发生问题，都会触发此事件。
3. ready 组件资源初始化完毕之后触发。
4. 组件样式适配，因为小程序插件的BUG，导致组件默认的display为inline，宽高变为0而不可见。因此，需要将组件设为block或inline-block等，
5. 插件里面使用了camera，因此需要用户授予“scope.camera”权限（必须使用face-ar组件之前拿到权限，否则会导致组件初始化失败，黑屏显示）。

之后可设置宽高值。

	.face {
	  display: block;
	  width: 750rpx;
	  height: 1200rpx;
	}

page.js

const { setOptions, setPackageRootPath, getFaceAR  } = requirePlugin('face-ar');

setOptions() 组件选项设置
如果需要设置，请在face-ar组件初始化之前调用，或在Page.onLoad或App.onLaunch事件之中调用

setPackageRootPath 设置分包路径
因为这个插件代码包较大，如果在主包使用超过了2M，就可以选择分包使用这个插件

getFaceAR(id) 获取人脸AR对象;
此对象所有API需等待face-ar组件ready事件触发之后才可调用

id（必填） face-ar组件声明的id属性值

 const faceAR = getFaceAR("ar");

start() 开启人脸追踪功能

faceAR.start();

addModel(ab,onProgress) 给人脸上增加3D模型内容

1. ab（必填） 模型的二进制内容 wx.getFileSystemManager().readFileSync(tempFilePath);
2. onProgress(选填) 进度

faceAR.addModel(ab,onProgress).then(res=>{
	//TODO
});

例如

addModel() {
    wx.downloadFile({
        url: '网络文件',
        success({ tempFilePath }) {
            const ab = wx.getFileSystemManager().readFileSync(tempFilePath);
            faceAR.addModel(ab).then((model) => {
                // 调整模型的位置和大小
                model.position.z = 0.04;
                model.scale.setScalar(1.1);
                // 使用默认的环境贴图
                model.useEnvMap();
            });
        }
    });
},

addImage(ab, type, onProgress) 给人脸上增加3D图片内容

1. ab（必填） 图片的二进制内容 wx.getFileSystemManager().readFileSync(tempFilePath);
2. type（必填） 图片格式 png/jpg
3. onProgress(选填) 进度

faceAR.addImage(ab, type, onProgress).then(res=>{
	//TODO
});

例如

// 初始化ar贴纸  使用本地贴纸
addImage(e) {
    var ab
    if (e) {
        ab = wx.getFileSystemManager().readFileSync(e);
    } else {
        ab = wx.getFileSystemManager().readFileSync('/ar_face/images/mask.png');
    }
    // 传入的数据需要是二进制的数据
    faceAR.addImage(ab, 'png').then((model) => {
        // 调整模型的位置和大小
        model.position.z = 0.04;
        model.scale.setScalar(2);
        // 使用默认的环境贴图
        model.useEnvMap();
    })
},

// 初始化ar贴纸
addImage() {
	wx.downloadFile({
	    url: '网络地址',
	    success({ tempFilePath }) {
	        const ab = wx.getFileSystemManager().readFileSync(tempFilePath);
	        faceAR.addImage(ab).then((model) => {
	            // 调整模型的位置和大小
	            model.position.z = 0.04;
	            model.scale.setScalar(2);
	            // 使用默认的环境贴图
	            model.useEnvMap();
	        });
	    }
	});
},

onTracked() 人脸追踪到时触发

faceAR.onTracked(()=>{
    //TODO
})

onLostTrack 人脸追踪丢失时触发

faceAR.onLostTrack(()=>{
    //TODO
})

takePhoto() 将face-ar显示区域的内容拍成照片。

faceAR.takePhoto().then(res=>{
    //TODO
})

在分包内引入插件代码包

app.json

"subpackages": [
    {
      "root": "faceAr",
      "pages": [
        "scanf/scanf"
      ],
      "plugins": {
        "face-ar": {
          "version": "2.1.4",
          "provider": "wx9f294c784497a4e9"
        }
      }
    }
],

page.json

{
    "usingComponents": {
      "face-ar": "plugin://face-ar/face-ar"
    }
}

page.js

当分包使用此插件时，必须先调用setPackageRootPath(rootPath)方法，设置分包路径。rootPath值为app.json中分包配置的root字段值。必须增加“/”结尾

const { setOptions, getFaceAR, setPackageRootPath } = requirePlugin('face-ar');
setPackageRootPath("faceAr/");