微信小程序AR扫描识别图(支持多图片)加载3D模型及其动画

For Instance

微信公众平台

URL：https://mp.weixin.qq.com/
注册微信小程序账号，建议保存APPID和原始ID
APPID：使用微信开发者工具创建小程序项目时使用
原始ID：小程序账号冻结申诉等其他用途
移动端微信搜索"小程序助手"可帮助查看微信号关联的小程序及原始ID

微信开发者工具

URL：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

EasyAR

URL：https://www.easyar.cn/
阅读官方文档时切勿忽略第三部分说明
EasyAR官方文档：https://help.easyar.cn/EasyAR%20WebAR/miniProgram.html#
来自EasyAR官方提供的云识别图库试用权限，在此表示感谢！！！
按需选择，注意提示。

创建图库后，查看密匙：小程序AR Token

自行上传识别图，查看图片信息
识别图ID：识别成功时的返回值(var targetID = res.data.result.target.targetId)，可用于支持多图片识别
可识别度：可识别度越高越好，大量的特征点提供灵敏识别

项目实践

下载文件到本地

  OnDownLoadImage: function () {
    wx.showLoading({
      title: 'Loading...',
    })
    wx.downloadFile({
      url: this.data.imageURL,
      success(res){
        wx.showToast({
          title: '请允许保存',
        })
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(){
            wx.hideToast({
              success(){
                wx.showToast({
                  title: '保存成功',
                  icon: 'none'
                })
              }
            })
          },
          fail(){
            wx.hideLoading({
              success(){
                wx.showModal({
                  title: '温馨提示',
                  content: '请手动打开相册权限',
                  success(res){
                    if(res.confirm){
                      wx.openSetting()
                    }
                  }
                })
              }
            })
          }
        })
      },
      fail(err){
        wx.hideLoading({
          success(res){
            wx.showToast({
              title: '获取失败',
              icon: 'none'
            })
          }
        })
        console.info(err)
      }
    })
  }

扫描识别

  PhotoRequest: function (imageBase64) {
    let that = this
    wx.showLoading({
      title: '识别中...',
    })
    wx.request({
      url: 'https://cn1-crs.easyar.com:8443/search',
      data: {
        image: imageBase64
      },
      header: {
        'Authorization': '小程序AR Token',
        // 默认值
        //'Authorization': 'jfI9YqnhofaI1mqA80TpQ5QCAp5b8McpOYVjkBpBmLQaN/w/SRRv0UYFK8pp3IasKHkAif/+piSxsz1VJoCscw==',
        'content-type': 'application/json'
      },
      method: 'POST',
      success(res) {
        that.setData({
          isReuqest: false
        })
        if (res.data.statusCode == 0) {
          that.listener.stop()
          that.data.status = false
          that.data.scanStatus = 'none'
          var signID = res.data.result.target.targetId
          if(signID == "识别图ID"){
            console.info("Sign03:----" + signID)
            wx.hideLoading({
              success(){
                wx.showToast({
                  title: '识别成功',
                })
              },
            })
            setTimeout(() => {
              wx.hideToast()
              wx.hideLoading()
              wx.navigateTo({
                url: '../index/index',
              })
            }, 1000);
          }
        }
      },
      fail(err) {
        console.log(err)
      }
    })
  },
  
  TransformPhotoBufferToBase64: function (frame) {
    this.setData({
      isReuqest: true
    })
    let photoBuffer = upng.encode([frame.data], frame.width, frame.height, 16, 0)
    let dataBase64 = wx.arrayBufferToBase64(photoBuffer)
    this.PhotoRequest(dataBase64)
    console.info("ToPhotoRequest")
  },
  
  OnRecognitionBtn: function () {
    if (this.data.status){
      return
    }
    this.data.status = true
    const cameraCT = wx.createCameraContext()
    this.listener = cameraCT.onCameraFrame((frame) => {
      if(!this.data.isReuqest) {
        this.TransformPhotoBufferToBase64(frame)
        console.info("ToTransform")
      }
    })
    this.listener.start({
      success: () => {
        console.log('Listener_T')
      },
      fail: (err) => {
        console.log('Listener_F')
        console.log(err)
      }
    })
  }

加载模型及其动画

import { registerGLTFLoader } from '../../Utility/gltf-loader'
import { createScopedThreejs } from '../../Utility/three'
var mainCamera
var mainScene
var mainRenderer
var model
var requestAnimationFrame
onLoad: function () {
    let that = this
    wx.showToast({
      title: '------正在加载------\r\n这可能需要一些时间',
      icon: 'none'
    }, 5000)
    var selectorQuery = wx.createSelectorQuery()
    selectorQuery.select('#webgl').node().exec((res) => {
      var mainCanvas = res[0].node
      mainCanvas.getContext('webgl', {
        alpha: true
      })
      if (mainCanvas != undefined) {
        mainCanvas.width = mainCanvas._width;
        mainCanvas.height = mainCanvas._height;
        requestAnimationFrame = mainCanvas.requestAnimationFrame;
        that.Init(mainCanvas)
      }
    })
  },
  //#endregion

  //#region Init
  Init: function (canvas) {
    let that = this
    const THREE = createScopedThreejs(canvas)
    registerGLTFLoader(THREE)
    mainCamera = new THREE.PerspectiveCamera(60, canvas.width / canvas.height, 1, 1000)
    mainCamera.position.set(0, 10, 10)
    mainCamera.lookAt(new THREE.Vector3(0, 2, 0))
    mainScene = new THREE.Scene()
    var light_Sphere = new THREE.HemisphereLight(0xffffff, 0xffffff)
    light_Sphere.position.set(0, 5, 0)
    mainScene.add(light_Sphere)
    var light_Direction = new THREE.DirectionalLight(0xffffff)
    light_Direction.position.set(0, 5, 2)
    mainScene.add(light_Direction)
    var loader = new THREE.GLTFLoader()
    var animationMixer
    var clock = new THREE.Clock()
    //https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb
    loader.load('https://www.***.cn/models/Horse.glb',
      function (object) {
        model = object.scene
        model.scale.set(0.02, 0.02, 0.02)
        animationMixer = new THREE.AnimationMixer(model)
        for (var i=0; i<object.animations.length; i++){
          animationMixer.clipAction(object.animations[i]).play()
        }
      mainScene.add(model)
    },
    undefined,
    function (e) {
      console.error(e)
    })
    mainRenderer = new THREE.WebGLRenderer({ antialias: true })
    mainRenderer.setSize(canvas.width, canvas.height)
    var Animate = function(){
      requestAnimationFrame(Animate)
      var deltaTime = clock.getDelta()
      if (animationMixer) {
        animationMixer.update(deltaTime);
      }
      mainRenderer.render(mainScene, mainCamera)
    }
    Animate()
  }