微信小程序xr-frame实现人脸识别(戴面具效果)

节前准备:文档:  xr-frame   模型链接  (注明：来源于微信开放文档)     

 基础要点: 

 1.ar-system="modes:Face;camera:Front" 

• ar-system 表示ar系统，camera表示相机(默认为后置Back，前置为Front)   
• modes 表示模式,目前支持平面识别Plane、2DMarker识别Marker、OSD识别OSD、人脸识别Face、肢体识别body和手部识别Hand2. 

2. 资源加载器 模型、材质、纹理、都可在这里加载,type表示加载类型:gltf,texture等

tips:="xx"> 用到的时候只需要绑定asset-id,mode="asset-id"模型material="asset-id"材质 

3.为其指定了模式mode和识别对象地址src，然后在其子级添加了一个glTF模型

4.mode=Face特征点定义如下：（本文用到的点为43）

• 图片来源于微信开放文档

重点代码：

 1. 场景设置为ar 模式为Face

 2. 加载用到的资源，本文用到的是一个面具(来源于:微信开放文档)

3.添加追踪器(属性auto-sync，这是一个数字数组，表示将识别出的面部特征点和对应顺序的子节点绑定并自动同步)

4.整体代码 (注明：来源于微信开放文档) 

• wxml

•  js部分

  Component({data: {loaded: false,arReady: false,},methods: {handleReady({detail}) {const xrScene = this.scene = detail.value;xrScene.event.add('tick', this.handleTick.bind(this));console.log('xr-scene', xrScene);},handleAssetsProgress: function ({detail}) {console.log('assets progress', detail.value);},handleAssetsLoaded: function ({detail}) {console.log('assets loaded', detail.value);this.setData({loaded: true});},handleARReady: function ({detail}) {console.log('arReady');this.setData({arReady: true});},handleTick: function () {const xrSystem = wx.getXrFrameSystem();const trackerEl = this.scene.getElementById('tracker');if (!trackerEl) {return;}const tracker = trackerEl.getComponent(xrSystem.ARTracker);if (!tracker.arActive) {return}// 这里只是例子，实际上用的是`ARTracker`的`autoSync`属性。// 但也是一个更高自由度的选项。// 视情况需要自己同步`tracker`的`scale`和`rotation`特定节点。// 第一个参数是特征点编好，第二个是可选的复用结果，第三个是可选的是否相对于`ARTracker`。// 为`false`为世界空间的位置，需要配合`scale`自己使用const position = tracker.getPosition(98, new xrSystem.Vector3(), false);}}
  })

  效果链接 (注明：来源于微信开放文档) 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！