AR

通过camera组件和canvas组件实现AR效果
其中onCameraFrame会每帧获取数据，注意该方法不支持真机调试 只能在预览中看

<!--index.wxml-->
<view>
    <!-- resolution camera组件中展示的分辨率 -->
    <!-- frame-size 拍照后实际图片的分辨率 -->
    <camera device-position="back" flash="off" binderror="error" bindinitdone="initdone" frame-size="medium" style="width: 100%; height: 80vh;"></camera>
    <button type="primary" bindtap="takePhoto">拍照{{i}}</button>
    <button type="primary" bindtap="setZoom1">缩小</button>
    <button type="primary" bindtap="setZoom2">放大</button>

    <image mode="widthFix" src="{{src}}"></image>
</view>

//index.js
const app = getApp()
var i = 0;
let context = null;
Page({
  data: {
    i: 0
  },
  onLoad: function () {

  },
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'normal', //high normal low
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
    console.log("用户不允许摄像头使用")
  },
  initdone(e) {
    console.log(e, "initdone")
    context = wx.createCameraContext()
    //该方法不支持真机调试 只能在预览中看
    const listener = context.onCameraFrame((frame) => {
      console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
      i++
      this.setData({
        i: i
      })
    })
    listener.start()
  },
  setZoom1(){
    context.setZoom({
      zoom:1
    })
  },
  setZoom2(){
    context.setZoom({
      zoom:2
    })
  },
  onReady() {

  }
})

3D

官方工具类库

threejs-miniprogram，存在以下问题:

• 小程序中canvas对GPU占用较高，且WEBGL不支持真机调试 只能在预览中看
• 存在多处未处理的bug，如不应存在windows对象，addEventListener方法等
• 安卓机展示Cube时无法加载纹理

//cube.js
var texture = new THREE.TextureLoader().load(XXX);
//加入以下代码
texture.minFilter = THREE.LinearFilter;

• Model加载的GLB/GLTF文件来自git，加载较慢，建议改为本地加载
  此外当模型文件带有贴图时可能会报错

//gltf-loader.js
//var URL = window.URL || window.webkitURL;
var URL = "";

• IOS对于较大高度的canvas不显示，此时需要

renderer.setPixelRatio(2);

IOS不显示问题

---

Yann开发的其他解决方案

• 链接一
• 链接二