const { default: useSaveImg } = require("./useSaveImg");
Component({
  behaviors: [require("../common/share-behavior").default],
  useSaveImg: [require("./useSaveImg").default],
  properties: {
    markerImg: {
      type: String,
    },
    markerList: {
      type: Array,
      value: [],
    },
    avatar: {
      type: String,
      default: "",
    },
  },
  data: {
    // loaded: false,
    arReady: false,
    showModel: false,
    showMesh: false,
    meshWidth: 400,
    meshHeight: 328,
  },
  observers: {
    markerList(newVal) {
      this.setData({
        newMarkerList: newVal,
      });
    },
  },
  lifetimes: {
    async attached() {
      // console.log("data", this.data);
    },
  },
  methods: {
    handleReady({ detail }) {
      const xrScene = (this.scene = detail.value);
      // 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 () {
      console.log("arReady");
      this.setData({ arReady: true });
      this.triggerEvent("changeFrame", { value: true });
      this.triggerEvent("changeLoading", { value: false });
      // setTimeout(() => {
      //   this.triggerEvent("changeFrame", { value: false });
      // }, 3000);
    },
    handleLog: function ({ detail }) {
      // console.log("log", detail.value);
    },
    handleTrackerSwitch: function ({ detail }) {
      // console.log(detail);
      // console.log("tracked match", "识别到了或者识别丢失了", detail);
      // 识别到了
      if (detail.value) {
        this.triggerEvent("changeFrame", { value: false });
        // console.log("开始识别了");
        this.setData({ showMesh: true });
        this.triggerEvent("changeMesh", { value: true });
        setTimeout(() => {
          this.setData({ showMesh: false });
          this.triggerEvent("changeMesh", { value: false });
          this.setData({
            showModel: true,
          });
          this.triggerEvent("changeModel", { value: true });
        }, 1000);
      } else {
        this.triggerEvent("changeFrame", { value: true });
        this.setData({
          showModel: false,
        });
        this.triggerEvent("changeModel", { value: false });
        this.setData({ showMesh: false });
        this.triggerEvent("changeMesh", { value: false });
      }
    },
    saveImg: function () {
      // 判断当前客户端是否支持分享系统
      const supported = this.scene.share.supported;
      if (!supported) {
        return;
      }
      // 截取配置，可选`type`为`jpg`或`png`，在为`jpg`时，可配置`0~1`的`quality`
      const options = {
        type: "png",
        quality: 0.9,
      };
      // 基础库`3.0.2`以上新增的异步接口，获取原始的`base64`字符串
      this.scene.share.captureToDataURLAsync(options).then((res) => {
        // this.initCanvas(res);
        // this.triggerEvent("initCanvas", { res: res });
        useSaveImg(res, () => {
          wx.navigateTo({ url: "/pages/share/share" });
        });
      });
      // 基础库`3.0.2`以上新增的异步接口，直接获取转换后的`ArrayBuffer`
      // const buffer = await scene.share.captureToArrayBufferAsync(options);
      // 获取本地路径的分享图片, 结束后释放文件
      // await scene.share.captureToLocalPath(options, fp => {});
      // 直接唤起分享图片给好友
      // this.scene.share.captureToFriends(options);
    },
  },
});

<!-- planeMode: 1;depthMask:true;depthDebug:true -->
<xr-scene
  ar-system="modes:Marker;"
  id="xr-scene"
  render-system="alpha:true"
  bind:ready="handleReady"
  bind:ar-ready="handleARReady"
  bind:log="handleLog"
>
  <!-- bind:tick="handleTick" -->
  <xr-assets
    bind:progress="handleAssetsProgress"
    bind:loaded="handleAssetsLoaded"
  >
    <xr-asset-load
      type="gltf"
      asset-id="miku"
      src="https://lc-dev-publish.oss-cn-guangzhou.aliyuncs.com/ar-demo/model/%E5%8A%9E%E5%85%AC%E5%95%86%E5%8A%A1%E6%A5%BC1.glb"
    />
    <!-- <xr-asset-load asset-id="basic-anim" type="keyframe" src="https://lc-dev-publish.oss-cn-guangzhou.aliyuncs.com/ar-demo/basic-animation.json" /> -->
    <!-- <xr-asset-load type="texture" asset-id="loadimg" src="https://lc-dev-publish.oss-cn-guangzhou.aliyuncs.com/ar-demo/loading_texture.jpg" /> -->
    <!-- <xr-asset-material asset-id="simple-mat" effect="simple" states="alphaMode:BLEND" /> -->
  </xr-assets>
  <xr-node wx:if="{{arReady}}">
    <xr-ar-tracker
      mode="Marker"
      wx:for="{{newMarkerList}}"
      wx:for-item="markerItem"
      id="marker-{{markerItem}}"
      src="{{markerItem}}"
      bind:ar-tracker-switch="handleTrackerSwitch"
    >
      <xr-gltf
        position="0 0 0"
        scale="0.2 0.2 0.2"
        rotation="-90 180 180"
        model="miku"
        anim-autoplay
        wx:if="{{showModel}}"
      ></xr-gltf>
    </xr-ar-tracker>
    <xr-camera
      id="camera"
      node-id="camera"
      clear-color="0.925 0.925 0.925 1"
      background="ar"
      is-ar-camera
    ></xr-camera>
  </xr-node>


  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light
      type="directional"
      rotation="180 0 0"
      color="1 1 1"
      intensity="3"
    />
  </xr-node>
</xr-scene>

真机调试上出现的,基础库是

微信小程序使用了xr-frame在重新点击小程序右上角的三个点重新进入时会出现卡顿相机直接不动了,但是如果是微信下拉然后选择小程序就不会卡顿.

这个组件是放在tabbar页面组件里的,如果不放tabbar组件里也会卡顿