mini-ar-demo/miniprogram/components/xr-ar-scan-marker/index.js

Component({
  properties: {
    fromScan: Boolean
  },
  data: {
    loaded: false,
    arReady: false,
    isPlay: false,

  },
  lifetimes: {
    async attached() {
      console.log('data', this.data)
    },
    async detached() {
      console.error('detached', this.video)
      this.video && (this.video = null);
      this.animator && (this.animator = null);
      this.setData({
        isPlay: false
      })

    }
  },
  methods: {
    handleReady({
      detail
    }) {
      const xrScene = this.scene = detail.value;
      this.mat = new(wx.getXrFrameSystem().Matrix4)();
      console.log('xr-scene', xrScene)
      this.triggerEvent('ready')
    },
    handleAssetsProgress: function ({
      detail
    }) {
      // console.log('assets progress', detail.value.progress);
      const progress =
        Math.floor(detail.value.progress * 100)
      this.triggerEvent('progress', progress)
    },
    handleAssetsLoaded: function ({
      detail
    }) {
      console.log('assets loaded', detail.value);
      const el = detail.value.target;
      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
      this.triggerEvent('loaded')


    },
    handleARReady: function ({
      detail
    }) {
      console.log('arReady', this.scene.ar.arVersion);
    },
    placeNode(event) {
      const {
        clientX,
        clientY
      } = event.touches[0];
      const {
        frameWidth: width,
        frameHeight: height
      } = this.scene;

      if (clientY / height > 0.8 && clientX / width < 0.2) {
        this.scene.getNodeById('setitem').visible = false;
        this.scene.ar.resetPlane();
      } else {
        console.error('show-gltf')
        this.showAndPlay();
      }

      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
    },
    handleGLTFLoaded({
      detail
    }) {
      const el = detail.value.target;
      console.error('handleGLTFLoaded')
      const gltf = el.getComponent("gltf");
      const video = this.scene.assets.getAsset("video-texture", "animaV");
      const newMat = this.scene.assets.getAsset("material", "matAnimaV");
      this.video = video
      this.video.onEnd = () => {

      }
      const animator = el.getComponent("animator");
      this.animator = animator

      console.log('animator', this.animator)

      for (const mesh of gltf.getPrimitivesByNodeName("video")) {
        mesh.material = newMat
        mesh.material.setText
      }
    },

    handleARTrackerState({
      detail
    }) {
      const tracker = detail.value;
      // 获取当前状态和错误信息
      const {
        state,
        errorMessage
      } = tracker;

      console.log('tracker-state', tracker)
      if (state == 2) {
        wx.showToast({
          title: "tracker"
        })
        this.showAndPlay();
      }
    },
    showAndPlay() {
      console.log('showAndPlay')
      this.scene.ar.placeHere('setitem', true);
      if (!this.data.isPlay) {
        this.scene.getNodeById('setitem').visible = true;
        this.setData({
          isPlay: true
        }, () => {
          if (this.video) {
            this.video.play()
          }
          if (this.animator) {
            this.animator.play('Animation')
          }
        })
      } 
    }
  }
})