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.video12 && (this.video12 = null);
      this.video2 && (this.video2 = null);
      this.animator1 && (this.animator1 = null);
      this.animator2 && (this.animator2 = null);
      this.animator3 && (this.animator3 = null);
      // this.innerAudioContext1 && this.innerAudioContext1.destroy() && (this.innerAudioContext1 = null)
      // this.setData({
      //   isStartPlay1: false,
      //   isStartPlay2: false,
      //   isStartPlay3: false,
      // })

    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    loaded: false,
    isStartPlay1: false,
    // isVideoEnd1: false,
    isVideo12Start: false,
    isStartAudioPlay1: false,
    isStartPlay2: false,
    isStartPlay3: false,
    animator1Name: 'dd5'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleReady({
      detail
    }) {
      const xrScene = this.scene = detail.value;
      this.mat = new(wx.getXrFrameSystem().Matrix4)();
      console.log('xr-scene', xrScene)
      this.triggerEvent('ready')
      // if (!this.innerAudioContext1) {
      //   this.innerAudioContext1 = wx.createInnerAudioContext({
      //     useWebAudioImplement: true // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
      //   })
      //   this.innerAudioContext1.src = 'https://houseoss.4dkankan.com/mini-ar-test/AR/01/audio1.MP3'
      //   this.innerAudioContext1.onPlay(() => {
      //     console.log('log:audio:play')
      //     this.setData({
      //       isStartAudioPlay1: true
      //     })
      //   })
      //   this.innerAudioContext1.onPause(() => {
      //     console.log('log:audio:pause')
      //     this.setData({
      //       isStartAudioPlay1: false,
      //     })
      //   })
      //   this.innerAudioContext1.onEnded(() => {

      //     if (this.animator1) {
      //       console.log('animator1重置', this.data.animator1Name)
      //       this.animator1.stop(this.data.animator1Name);

      //     }
      //     console.log('log:audio:ended')
      //     this.setData({
      //       isStartAudioPlay1: false,
      //       isVideoEnd1: false,
      //       isStartPlay1: false
      //     })
      //   })
      //   console.log('this.innerAudioContext1', this.innerAudioContext1)
      // }


    },
    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', el)
      const gltf = el.getComponent("gltf");
      const video1 = this.scene.assets.getAsset("video-texture", "item1-v");
      const newMat = this.scene.assets.getAsset("material", "item1-m");

      const video12 = this.scene.assets.getAsset("video-texture", "item1-2-v");
      const newMat2 = this.scene.assets.getAsset("material", "item1-2-m");




      this.video1 = video1
      this.video12 = video12

      this.video1.onPlay = () => {
        console.warn('video1 onPlay')
      }

      this.video1.onEnd = () => {
        console.warn('video1 ended')
      }

      this.video12.onPlay = () => {
        console.warn('video12 onPlay')
        this.setData({
          isVideo12Start: true
        })
      }
      this.video12.onEnd = () => {
        this.setData({
          isVideo12Start: false
        })
        console.warn('video12 onEnd')
        this.animator1.pauseToFrame(this.data.animator1Name, 0);
        this.animator1.stop(this.data.animator1Name);
      }
      const animator = el.getComponent("animator");

      // console.warn("current el", el)

      this.animator1 = animator

      console.warn('this.animator1', this.animator1)


      const othergltf = this.scene.assets.getAsset("gltf", "item1")

      for (const mesh of othergltf.model.meshes) {

        if (String(mesh.name).includes('video1')) {
          const videoMesh1 = gltf.getPrimitivesByMeshName(mesh.name)
          console.warn('videoMesh1', mesh.name, videoMesh1[0].nodeName)
          for (const mesh of gltf.getPrimitivesByNodeName(videoMesh1[0].nodeName)) {
            mesh.material = newMat
          }
        }
        if (String(mesh.name).includes('video2')) {
          const videoMesh2 = gltf.getPrimitivesByMeshName(mesh.name)
          console.warn('videoMesh2', mesh.name, videoMesh2[0].nodeName)
          for (const mesh of gltf.getPrimitivesByNodeName(videoMesh2[0].nodeName)) {
            mesh.material = newMat2
          }
        }
      }
    },

    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")) {
        console.error('2有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)
    },

    playitem1Action() {
      console.log('playitem1Action')
      if (this.video1) {
        this.video1.play()
      }
      if (this.animator1) {
        this.animator1.pauseToFrame(this.data.animator1Name, 0);
        this.animator1.resume(this.data.animator1Name)
      }
      if (this.video12) {
        setTimeout(() => {
          console.log('play 1-2 video -video2开始后 (8600ms) 8.6秒后播')
          this.video12.play()
          this.setData({
            isVideo12Start: true
          })
        }, 8600)
      }
    },
    playitem1() {
      if (!this.data.isStartPlay1) {
        console.warn('play 1')
        this.setData({
          isStartPlay1: true
        }, () => {
          // video1和animator同时播   video2开始后10秒后播
          this.playitem1Action();
        })
      } else {
        if (this.video12 && this.data.isVideo12Start) {
          console.warn('play 1 resume video')
          this.video12.resume()
        } else {
          console.warn('play 1 restart video')
          this.setData({
            isVideo12Start: true
          }, () => {
            this.playitem1Action();
          })

        }
      }
    },

    play(type) {
      if (this.data.loaded) {
        this.triggerEvent('hideGuide')
        if (type === 1) {
          this.playitem1();
        }
        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) {
        // if (this.innerAudioContext1 && this.data.isStartAudioPlay1) {
        //   this.innerAudioContext1.pause()
        // }
        // if (this.animator1) {
        //   this.animator1.pause(this.data.animator1Name)
        // }
        console.warn('pause 1', this.data.isVideo12Start, this.video12)
        if (this.video12 && this.data.isVideo12Start) {
          this.video12.pause()
        }

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

    handleARTrackerState1({
      detail
    }) {
      // 事件的值即为`ARTracker`实例
      const tracker = detail.value;
      // 获取当前状态和错误信息

      console.log('tracker', tracker)

      const {
        state,
        errorMessage
      } = tracker;
      if (state == 2) {
        this.play(1)
      } else {
        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);
      }
    }
  }
})