mini-ar-demo/miniprogram/components/ar-tracker/ar-tracker.js

// components/ar-tracker/ar-tracker.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },
  lifetimes: {
    async attached() {
      console.log('data', this.data)
    },
    async detached() {
      console.error('detached')
      this.video1 && (this.video1 = null);
      this.video2 && (this.video2 = null);
      this.animator1 && (this.animator1 = null);
      this.animator2 && (this.animator2 = null);
      this.animator3 && (this.animator3 = null);
      this.setData({
        isStartPlay1: false,
        isStartPlay2: false,
        isStartPlay3: false,
      })

    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    loaded: false,
    isStartPlay1: false,
    isStartPlay2: false,
    isStartPlay3: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleReady({
      detail
    }) {
      const xrScene = this.scene = detail.value;
      this.mat = new(wx.getXrFrameSystem().Matrix4)();
      console.log('xr-scene', xrScene)
      this.triggerEvent('ready')
    },
    handleARReady() {
      console.log('handleARReady')
    },

    handleAssetsProgress: function ({
      detail
    }) {
      const progress =
        Math.floor(detail.value.progress * 100)
      console.log('progress', progress)
      this.triggerEvent('progress', progress)
    },

    handleAssetsLoaded({
      detail
    }) {
      console.log('assets loaded', detail.value);
      this.triggerEvent('loaded')
      this.setData({
        loaded: true
      })

    },
    handleItem1Loaded({
      detail
    }) {
      const el = detail.value.target;
      console.warn('item1 load')
      const gltf = el.getComponent("gltf");
      const video = this.scene.assets.getAsset("video-texture", "item1-v");
      const newMat = this.scene.assets.getAsset("material", "item1-m");
      this.video1 = video
      // this.video1.onEnd = () => {}
      const animator = el.getComponent("animator");
      this.animator1 = animator
      console.warn('animator1', this.animator1)
      for (const mesh of gltf.getPrimitivesByNodeName("video")) {
        mesh.material = newMat
      }

    },
    handleItem2Loaded({
      detail
    }) {
      const el = detail.value.target;
      console.warn('item2 load')
      const gltf = el.getComponent("gltf");
      const video = this.scene.assets.getAsset("video-texture", "item2-v");
      const newMat = this.scene.assets.getAsset("material", "item2-m");
      this.video2 = video
      for (const mesh of gltf.getPrimitivesByNodeName("video")) {
        mesh.material = newMat
      }
    },
    handleItem3Loaded({
      detail
    }) {
      const el = detail.value.target;
      console.warn('item3 load')
      const gltf = el.getComponent("gltf");
      const animator = el.getComponent("animator");
      this.animator3 = animator
      console.warn('animator3', this.animator3)
    },
    play(type) {
      if (this.data.loaded) {
        if (type === 1) {
          console.warn('play 1')
          if (this.video1) {
            this.data.isStartPlay1 ? this.video1.resume() : this.video1.play()
          }
          if (this.animator1) {
            this.data.isStartPlay1 ? this.animator1.resume('Animation') : this.animator1.play('Animation')
          }
          this.setData({
            isStartPlay1: true
          })
        }
        if (type === 2) {
          console.warn('play 2')
          if (this.video2) {
            this.data.isStartPlay2 ? this.video2.resume() : this.video2.play()
          }
          this.setData({
            isStartPlay2: true
          })
        }
        if (type === 3) {
          console.warn('play 3')
          if (this.animator3) {
            if (!this.data.isStartPlay3) {
              this.animator3.play('Group21137Action', {
                loop: 0
              });
              this.animator3.play('polySurface1Action', {
                loop: 0
              });
              this.animator3.play('vlAction', {
                loop: 0
              });
            } else {
              this.animator3.resume('Group21137Action')
              this.animator3.resume('polySurface1Action')
              this.animator3.resume('vlAction')
            }
          }
          this.setData({
            isStartPlay3: true
          })
        }
      }

    },

    pause(type) {
      if (type === 1) {
        console.warn('pause 1')
        if (this.video1) {
          this.video1.pause()
        }
        if (this.animator1) {
          this.animator1.pause('Animation')
        }
      }
      if (type === 2) {
        console.warn('pause 2')
        if (this.video2) {
          this.video2.pause()
        }
      }
    },

    handleARTrackerState1({
      detail
    }) {
      // 事件的值即为`ARTracker`实例
      const tracker = detail.value;
      // 获取当前状态和错误信息
      const {
        state,
        errorMessage
      } = tracker;
      if (state == 2) {
        this.play(1)
      } else {
        this.data.isStartPlay1 && this.pause(1)
      }
    },
    handleARTrackerState2({
      detail
    }) {
      // 事件的值即为`ARTracker`实例
      const tracker = detail.value;
      // 获取当前状态和错误信息
      const {
        state,
        errorMessage
      } = tracker;
      if (state == 2) {
        this.play(2);
      } else {
        this.pause(2);

      }
    },
    handleARTrackerState3({
      detail
    }) {
      // 事件的值即为`ARTracker`实例
      const tracker = detail.value;
      // 获取当前状态和错误信息
      const {
        state,
        errorMessage
      } = tracker;
      if (state == 2) {
        this.play(3);
      } else {
        this.pause(3);
      }
    }
  }
})