change

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

@@ -35,6 +35,7 @@ Component({
   data: {
     loaded: false,
     isStartPlay1: false,
+    isShowPlay1: false,
     isVideoEnd1: false,
     isStartAudioPlay1: false,
     isStartPlay2: false,
@@ -52,23 +53,32 @@ Component({
       this.mat = new(wx.getXrFrameSystem().Matrix4)();
       console.log('xr-scene', xrScene)
       this.triggerEvent('ready')
-      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.warn('innerAudioContext1 play')
-        this.setData({
-          isStartAudioPlay1: true
+      if (!this.innerAudioContext1) {
+        this.innerAudioContext1 = wx.createInnerAudioContext({
+          useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
         })
-      })
-
-      this.innerAudioContext1.onEnded(() => {
-        this.setData({
-          isStartAudioPlay1: false,
+        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
+          })
         })
-      })
-      console.log('this.innerAudioContext1', this.innerAudioContext1)
+        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() {
@@ -117,11 +127,9 @@ Component({
 
       this.video1.onEnd = () => {
         console.warn('video1 ended')
-        this.innerAudioContext1 && this.innerAudioContext1.play()
         this.setData({
           isVideoEnd1: true
         })
-        // this.video12 && this.video12.play();
       }
       const animator = el.getComponent("animator");
       this.animator1 = animator
@@ -179,18 +187,23 @@ Component({
     },
     play(type) {
       if (this.data.loaded) {
+        this.triggerEvent('hideGuide')
         if (type === 1) {
           console.warn('play 1')
           if (this.video1) {
-            if (this.data.isStartAudioPlay1) {
-              this.data.isStartPlay1 && this.innerAudioContext1.play()
+            console.log('play 1 video', this.data.isStartPlay1, this.data.isVideoEnd1)
+            if (!this.data.isStartPlay1) {
+              this.video1.play()
             } else {
-              console.log('play 1 video', this.data.isStartPlay1, this.data.isVideoEnd1)
-              this.data.isStartPlay1 ? !this.data.isVideoEnd1 ? this.video1.resume() : this.video1.play() : this.video1.play()
+              !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('dd3') : this.animator1.play('dd3')
+            this.data.isStartPlay1 ? this.animator1.resume('dd4') : this.animator1.play('dd4')
           }
           this.setData({
             isStartPlay1: true
@@ -240,7 +253,7 @@ Component({
           this.innerAudioContext1.pause()
         }
         if (this.animator1) {
-          this.animator1.pause('dd3')
+          this.animator1.pause('dd4')
         }
       }
       if (type === 2) {
@@ -259,13 +272,16 @@ Component({
       // 获取当前状态和错误信息
 
       console.log('tracker', tracker)
-   
+
       const {
         state,
         errorMessage
       } = tracker;
       if (state == 2) {
-        this.play(1)
+        this.play(1);
+        !this.data.isShowPlay1 && this.setData({
+          isShowPlay1: true
+        })
       } else {
         this.data.isStartPlay1 && this.pause(1)
       }

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

@@ -24,7 +24,7 @@
 
   <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 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-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>

miniprogram/pages/scaner/scaner.ts

@@ -1,4 +1,5 @@
 // pages/scaner/scaner.ts
+
 Page({
 
   /**
@@ -9,8 +10,8 @@ Page({
     height: 300,
     renderWidth: 300,
     renderHeight: 300,
-    loaded: false
-
+    loaded: false,
+    isShowGuide: true
   },
 
   /**
@@ -82,6 +83,9 @@ Page({
     const val = Number(event.detail) || 0
     this.setData({ progress: val })
   },
+  handleHideGuide() {
+    this.setData({ isShowGuide: false })
+  },
   handleLoaded() {
     this.setData({ loaded: true })
   }

miniprogram/pages/scaner/scaner.wxml

@@ -1,8 +1,14 @@
 <view class="page">
-  <!-- <navigation-bar title="{{'四维AR'}}" back="{{true}}" /> -->
+
   <view class="loading" wx:if="{{!loaded}}">
-    <image src="https://houseoss.4dkankan.com/mini-ar-test/loading.svg" />
-    <text>{{progress}}% </text>
+    <!-- <view class="loading"> -->
+    <image src="https://houseoss.4dkankan.com/mini-ar-test/assets/scaner_loading.png" />
+    <text class="cap">精彩内容加载...</text>
+    <text class="proc">{{progress}}% </text>
+    <view class="loading_bg"></view>
   </view>
-  <ar-tracker disable-scroll id="main-frame" width="{{renderWidth}}" height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;" bind:progress="handleProgress" bind:loaded="handleLoaded" />
+  <view class="guide_line" wx:if="{{loaded && isShowGuide}}">
+    <image mode="widthFix" src="https://houseoss.4dkankan.com/mini-ar-test/assets/scanner_guide.png" />
+  </view>
+  <ar-tracker disable-scroll id="main-frame" width="{{renderWidth}}" height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;" bind:progress="handleProgress" bind:loaded="handleLoaded" bind:hideGuide="handleHideGuide"/>
 </view>

miniprogram/pages/scaner/scaner.wxss

@@ -19,9 +19,52 @@ page {
   color: white;
 }
 
+.loading_bg {
+  background-color: rgba(0, 0, 0, 0.65);
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
 .loading image {
+  position: relative;
+  z-index: 1000;
   width: 140px;
   height: 140px;
   fill: white;
   color: white;
+}
+
+.loading .cap {
+  padding: 10px 0;
+  position: relative;
+  z-index: 1000;
+  color: white;
+}
+
+.loading text {
+  position: relative;
+  z-index: 1000;
+  color: white;
+}
+
+.guide_line {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: white;
+}
+
+.guide_line image {
+
 }