feat: update

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

@@ -10,21 +10,22 @@ Component({
   lifetimes: {
     async attached() {
       console.log('data', this.data)
+
     },
     async detached() {
       console.error('detached')
       this.video1 && (this.video1 = null);
-      // this.video12 && (this.video12 = 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,
-      })
+      // this.innerAudioContext1 && this.innerAudioContext1.destroy() && (this.innerAudioContext1 = null)
+      // this.setData({
+      //   isStartPlay1: false,
+      //   isStartPlay2: false,
+      //   isStartPlay3: false,
+      // })
 
     }
   },
@@ -35,12 +36,12 @@ Component({
   data: {
     loaded: false,
     isStartPlay1: false,
-    isShowPlay1: false,
-    isVideoEnd1: false,
+    // isVideoEnd1: false,
+    isVideo12Start: false,
     isStartAudioPlay1: false,
     isStartPlay2: false,
     isStartPlay3: false,
-    animator1Name: 'dd4'
+    animator1Name: 'dd5'
   },
 
   /**
@@ -54,39 +55,39 @@ Component({
       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.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);
+      //     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)
-      }
+      //     }
+      //     console.log('log:audio:ended')
+      //     this.setData({
+      //       isStartAudioPlay1: false,
+      //       isVideoEnd1: false,
+      //       isStartPlay1: false
+      //     })
+      //   })
+      //   console.log('this.innerAudioContext1', this.innerAudioContext1)
+      // }
 
 
     },
@@ -119,38 +120,52 @@ Component({
       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 video1 = this.scene.assets.getAsset("video-texture", "item1-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)
+      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 playing')
-        this.setData({
-          isVideoEnd1: false
-        })
+        console.warn('video1 onPlay')
       }
 
       this.video1.onEnd = () => {
         console.warn('video1 ended')
+      }
+
+      this.video12.onPlay = () => {
+        console.warn('video12 onPlay')
         this.setData({
-          isVideoEnd1: true
+          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")
-
 
 
+      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)
@@ -159,16 +174,16 @@ Component({
             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
-        //   }
-        // }
+        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
     }) {
@@ -194,29 +209,56 @@ Component({
       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) {
-          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(this.data.animator1Name) : this.animator1.play(this.data.animator1Name)
-          }
-          this.setData({
-            isStartPlay1: true
-          })
+          this.playitem1();
         }
         if (type === 2) {
           console.warn('play 2')
@@ -256,17 +298,17 @@ Component({
 
     pause(type) {
       if (type === 1) {
-        console.warn('pause 1')
-
-        if (this.innerAudioContext1 && this.data.isStartAudioPlay1) {
-          this.innerAudioContext1.pause()
-        }
-        if (this.animator1) {
-          this.animator1.pause(this.data.animator1Name)
-        }
-        if (this.video1) {
-          this.video1.pause()
+        // 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')
@@ -290,12 +332,9 @@ Component({
         errorMessage
       } = tracker;
       if (state == 2) {
-        this.play(1);
-        !this.data.isShowPlay1 && this.setData({
-          isShowPlay1: true
-        })
+        this.play(1)
       } else {
-        this.data.isStartPlay1 && this.pause(1)
+        this.pause(1)
       }
     },
     handleARTrackerState2({

miniprogram/components/ar-tracker/ar-tracker.wxml

@@ -1,50 +1,47 @@
 <xr-scene ar-system="modes:Marker;planeMode: 1" id="xr-scene" bind:ready="handleReady" bind:ar-ready="handleARReady" bind:log="handleLog">
 
   <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
+    <!-- 第1-0个模型 start-->
+    <xr-asset-load type="gltf" asset-id="item1" src="https://houseoss.4dkankan.com/mini-ar-test/AR/new/dd9/dd9.gltf" options="preserveRaw: true" />
 
-    <xr-asset-load type="gltf" asset-id="item1" src="https://houseoss.4dkankan.com/mini-ar-test/AR/01/dds01/dds01.gltf" options="preserveRaw: true" />
-    <xr-asset-load type="gltf" asset-id="item2" src="https://houseoss.4dkankan.com/mini-ar-test/AR/2/gc99.glb" />
-    <xr-asset-load type="gltf" asset-id="item3" src="https://houseoss.4dkankan.com/mini-ar-test/mtgj.glb" />
-
-    <!-- <xr-asset-load type="video-texture" asset-id="item1-v" src="https://houseoss.4dkankan.com/mini-ar-test/AR/01/video1_480.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:https://houseoss.4dkankan.com/mini-ar-test/AR/01/video_cover.png" /> -->
-    <xr-asset-load type="video-texture" asset-id="item1-v" src="https://houseoss.4dkankan.com/mini-ar-test/AR/01/video1_480.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:https://houseoss.4dkankan.com/mini-ar-test/AR/01/output.jpg" />
+    <xr-asset-load type="video-texture" asset-id="item1-v" src="https://houseoss.4dkankan.com/mini-ar-test/AR/new/video/ar001_v1.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:https://houseoss.4dkankan.com/mini-ar-test/AR/new/video/ar001_v1.jpg" />
     <xr-asset-material asset-id="item1-m" effect="standard" uniforms="u_baseColorMap: video-item1-v" />
 
-    <!-- <xr-asset-load type="video-texture" asset-id="item12-v" src="https://houseoss.4dkankan.com/mini-ar-test/AR/01/video2_480.mp4" options="autoPlay:true,loop:true,abortAudio:true,placeHolder:'https://houseoss.4dkankan.com/mini-ar-test/AR/01/video2_480.mp4?x-oss-process=video/snapshot,t_0,f_jpg,w_1000,m_fast,ar_auto'" />
-    <xr-asset-material asset-id="item12-m" effect="simple" uniforms="u_baseColorMap: video-item12-v" /> -->
+    <xr-asset-load type="video-texture" asset-id="item1-2-v" src="https://houseoss.4dkankan.com/mini-ar-test/AR/new/video/ar001_v2.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:https://houseoss.4dkankan.com/mini-ar-test/AR/new/video/ar001_v2.jpg" />
+    <xr-asset-material asset-id="item1-2-m" effect="standard" uniforms="u_baseColorMap: video-item1-2-v" />
 
+    <!-- 第1-0个模型 end-->
+
+    <!-- 第2模型 start-->
+    <xr-asset-load type="gltf" asset-id="item2" src="https://houseoss.4dkankan.com/mini-ar-test/AR/2/gc99.glb" />
+    <xr-asset-load type="gltf" asset-id="item3" src="https://houseoss.4dkankan.com/mini-ar-test/AR/3/mtgj.glb" />
 
     <xr-asset-load type="video-texture" asset-id="item2-v" src="https://houseoss.4dkankan.com/mini-ar-test/AR/2/video2-480.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:'https://houseoss.4dkankan.com/mini-ar-test/AR/2/video2-480.mp4?x-oss-process=video/snapshot,t_0,f_jpg,w_1000,m_fast,ar_auto'" />
     <xr-asset-material asset-id="item2-m" effect="simple" uniforms="u_baseColorMap: video-item2-v" />
 
-    <!-- <xr-asset-load type="video-texture" asset-id="cat" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/videos/cat.mp4" options="autoPlay:true,loop:true,abortAudio:false,placeHolder:https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/videos/cat.jpg" />
-
-    <xr-asset-material asset-id="standard-mat" effect="standard" /> -->
-
+    <!-- 第3模型 end-->
   </xr-assets>
 
   <xr-env env-data="xr-frame-team-workspace-day" />
 
   <xr-node>
     <xr-ar-tracker id="ar-tracker-1" mode="Marker" src="https://houseoss.4dkankan.com/mini-ar-test/AR/01/01.png" bind:ar-tracker-state="handleARTrackerState1">
+
       <xr-gltf vis model="item1" position="0 0 0.04" height="100%" scale="8.1 8.1 8.1" rotation="-270 0 180" bind:gltf-loaded="handleItem1Loaded"></xr-gltf>
-      <!-- <xr-mesh geometry="plane" rotation="0 0 0" scale="1 1 1" uniforms="u_baseColorFactor:0 1 0 0.2" states="alphaMode:BLEND" /> -->
-      <!-- <xr-gltf model="butterfly" anim-autoplay position="0 0 0" scale="0.4 0.4 0.4" rotation="0 -50 0" /> -->
+
     </xr-ar-tracker>
+
+
+        
     <xr-ar-tracker id="ar-tracker-2" mode="Marker" src="https://houseoss.4dkankan.com/mini-ar-test/AR/2/marker.png" bind:ar-tracker-state="handleARTrackerState2">
       <xr-gltf model="item2" position="0 0.2 0" scale="0.08 0.08 0.08" rotation="0 -90 80" bind:gltf-loaded="handleItem2Loaded"></xr-gltf>
     </xr-ar-tracker>
     <xr-ar-tracker id="ar-tracker-3" mode="Marker" src="https://houseoss.4dkankan.com/mini-ar-test/AR/3/marker.png" bind:ar-tracker-state="handleARTrackerState3">
       <xr-node>
         <xr-gltf id="item3" position="0 0 0" scale="0.05 0.05 0.05" rotation="-80 0 0" model="item3" bind:gltf-loaded="handleItem3Loaded" cast-shadow receive-shadow></xr-gltf>
-        <!-- <xr-light type="ambient" color="1 1 1" intensity="2" />
-        <xr-light type="directional" rotation="180 10 0" color="1 1 1" intensity="3" /> -->
       </xr-node>
     </xr-ar-tracker>
 
-    <!-- <xr-camera id="camera" node-id="camera" position="1 1 1" clear-color="0.925 0.925 0.925 1" far="2000" background="ar" is-ar-camera></xr-camera> -->
-    <!-- 
-    <xr-camera id="camera1" node-id="camera1" clear-color="0.925 0.925 0.925 1" background="ar" target="item1-wrpper" camera-orbit-control=""></xr-camera> -->
 
     <xr-camera id="camera" position="1 1 1" node-id="camera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
 

miniprogram/components/xr-ar-vio-marker-1/index.wxml

@@ -3,7 +3,7 @@
   <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
     <xr-asset-load type="gltf" asset-id="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" />
     <xr-asset-load type="gltf" asset-id="gltf-item" src="https://houseoss.4dkankan.com/mini-ar-test/AR/1/anima4.glb" />
-    <xr-asset-load type="gltf" asset-id="butterfly" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/butterfly/index.glb" />
+   
     <xr-asset-load type="video-texture" asset-id="animaV" src="https://houseoss.4dkankan.com/mini-ar-test/AR/1/video1-480.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:'https://houseoss.4dkankan.com/mini-ar-test/AR/1/video1-480.mp4?x-oss-process=video/snapshot,t_0,f_jpg,w_1000,m_fast,ar_auto'" />
     <xr-asset-material asset-id="matAnimaV" effect="simple" uniforms="u_baseColorMap: video-animaV" />
   </xr-assets>

miniprogram/components/xr-ar-vio-marker-2/index.wxml

@@ -2,10 +2,7 @@
   <!-- vio + marker 模式下 planeMode 需设置为 1 (只允许水平面识别) -->
   <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
     <xr-asset-load type="gltf" asset-id="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" />
-    <!-- <xr-asset-load type="gltf" asset-id="gltf-item" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/just_a_girl/index.glb" /> -->
-    <!-- <xr-asset-load type="gltf" asset-id="gltf-item" src="https://houseoss.4dkankan.com/mini-ar-test/AR/1/Dundun_Ani" /> -->
     <xr-asset-load type="gltf" asset-id="gltf-item" src="https://houseoss.4dkankan.com/mini-ar-test/AR/2/gc99.glb" />
-    <!-- <xr-asset-load type="gltf" asset-id="butterfly" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/butterfly/index.glb" /> -->
 
     <xr-asset-load type="video-texture" asset-id="cat" src="https://houseoss.4dkankan.com/mini-ar-test/AR/2/video2-480.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:https://houseoss.4dkankan.com/mini-ar-test/AR/2/video2-480.mp4?x-oss-process=video/snapshot,t_0,f_jpg,w_1000,m_fast,ar_auto" />