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,
    isShowPlay1: false,
    isVideoEnd1: false,
    isStartAudioPlay1: 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')
      if (!this.innerAudioContext1) {
        this.innerAudioContext1 = wx.createInnerAudioContext({
          useWebAudioImplement: false // 是否使用 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(() => {
          console.log('log:audio:ended')
          this.setData({
            isStartAudioPlay1: 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 video = this.scene.assets.getAsset("video-texture", "item1-v");
      // const video12 = this.scene.assets.getAsset("video-texture", "item12-v");
      const newMat = this.scene.assets.getAsset("material", "item1-m");
      // const newMat2 = this.scene.assets.getAsset("material", "item12-m");

      this.video1 = video
      // this.video12 = video12
      console.log('this.video1', this.video1)
      this.video1.onPlay = () => {
        console.warn('video1 playing')
        this.setData({
          isVideoEnd1: false
        })
      }

      this.video1.onEnd = () => {
        console.warn('video1 ended')
        this.setData({
          isVideoEnd1: true
        })
      }
      const animator = el.getComponent("animator");
      this.animator1 = animator

      console.warn('this.animator1', this.animator1)
      const othergltf = this.scene.assets.getAsset("gltf", "item1")




      for (const mesh of othergltf.model.meshes) {
        // mesh.material = newMat

        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)
    },
    play(type) {
      if (this.data.loaded) {
        this.triggerEvent('hideGuide')
        if (type === 1) {
          console.warn('play 1')
          if (this.video1) {
            console.log('play 1 video', this.data.isStartPlay1, this.data.isVideoEnd1)
            if (!this.data.isStartPlay1) {
              this.video1.play()
            } else {
              !this.data.isVideoEnd1 && this.video1.resume()
            }
          }
          if (this.innerAudioContext1) {
            console.log('play 1 audio', this.data.isStartAudioPlay1);
            !this.data.isStartAudioPlay1 && this.innerAudioContext1.play();
          }
          if (this.animator1) {
            this.data.isStartPlay1 ? this.animator1.resume('dd4') : this.animator1.play('dd4')
          }
          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.innerAudioContext1 && this.data.isStartAudioPlay1) {
          this.innerAudioContext1.pause()
        }
        if (this.animator1) {
          this.animator1.pause('dd4')
        }
      }
      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);
        !this.data.isShowPlay1 && this.setData({
          isShowPlay1: true
        })
      } 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);
      }
    }
  }
})