feat: test

miniprogram/components/ar-tracker copy/ar-tracker.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "renderer": "xr-frame",
+  "usingComponents": {}
+}

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

@@ -0,0 +1,43 @@
+<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">
+
+    <!-- <xr-asset-load type="gltf" asset-id="soldier" src="https://houseoss.4dkankan.com/Soldier.glb" /> -->
+
+    <xr-asset-load type="gltf" asset-id="mtgj" src="https://houseoss.4dkankan.com/mini-ar-test/mtgj.glb" />
+    <xr-asset-load type="texture" asset-id="point" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/particles/point.png" />
+
+    <xr-asset-load type="video-texture" asset-id="cat" src="https://houseoss.4dkankan.com/mini-ar-test/Homevideonew.mp4" options="autoPlay:true,loop:true,abortAudio:false,placeHolder:https://houseoss.4dkankan.com/mini-ar-test/Homevideonew.mp4?x-oss-process=video/snapshot,t_0,f_jpg,w_1000,m_fast,ar_auto" />
+
+    <!-- <xr-asset-material asset-id="catMat" effect="simple" uniforms="u_baseColorMap: video-cat" /> -->
+
+  </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/save-1.png" bind:ar-tracker-state="handleARTrackerState">
+      <!-- <xr-gltf id="soldier-1" position="0 0.2 0" scale="0.3 0.3 0.3" rotation="90 270 90" model="soldier" anim-autoplay bind:gltf-loaded="handleGLTFLoaded" wx:if="{{isT1}}"></xr-gltf> -->
+      <xr-gltf id="mtgj-1" position="0 0 0" scale="0.03 0.03 0.03" rotation="-45 0 0" model="mtgj" anim-autoplay="loop:0" bind:gltf-loaded="handleGLTFLoaded" wx:if="{{isT1}}"></xr-gltf>
+      <!-- <xr-mesh node-id="mesh-plane" geometry="plane" material="mat"  /> -->
+      <!-- <xr-particle capacity="500" emit-rate="20" size="0.03 0.06" life-time="2 3" speed="0.04 0.1" start-color="1 1 1 0.8" end-color="1 1 1 0.2" emitter-type="BoxShape" emitter-props="minEmitBox:-0.5 0 0.5,maxEmitBox:0.5 0.2 0,direction:0 0 -1,direction2:0 0 -1" texture="point" /> -->
+    </xr-ar-tracker>
+
+    <xr-ar-tracker id="ar-tracker-2" mode="Marker" src="https://houseoss.4dkankan.com/mini-ar-test/mon1.jpg" bind:ar-tracker-state="handleARTrackerState1">
+      <xr-mesh node-id="mesh-plane" geometry="plane" material="catMat" scale="0.4 0.4 0.4" />
+    </xr-ar-tracker>
+
+    <xr-ar-tracker id="ar-tracker-3" mode="Marker" src="https://houseoss.4dkankan.com/mini-ar-test/save-2.png" bind:ar-tracker-state="handleARTrackerState2">
+      <xr-mesh node-id="mesh-plane" geometry="plane" material="catMat" scale="0.4 0.4 0.4" wx:if="{{isT3}}" />
+    </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-node>
+
+
+  <xr-node node-id="lights">
+    <xr-light type="ambient" color="1 1 1" intensity="2" />
+    <xr-light type="directional" rotation="90 60 0" color="1 1 1" intensity="1" />
+  </xr-node>
+
+</xr-scene>

miniprogram/components/ar-tracker copy/ar-tracker.wxss

@@ -0,0 +1 @@
+/* components/ar-tracker/ar-tracker.wxss */

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

@@ -0,0 +1,105 @@
+// components/ar-tracker/ar-tracker.ts
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    isT1: false,
+    isT2: false,
+    isT3: false
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handleReady() {
+      console.log('handleReady')
+    },
+    handleARReady() {
+      console.log('handleARReady')
+    },
+    handleLog(log) {
+      console.log('log', log)
+    },
+    handleARTrackerState({
+      detail
+    }) {
+      // 事件的值即为`ARTracker`实例
+      const tracker = detail.value;
+      // 获取当前状态和错误信息
+      const {
+        state,
+        errorMessage
+      } = tracker;
+      if (state == 2) {
+        this.setData({
+          isT1: true
+        })
+        // wx.showToast({
+        //   title: "阿里公仔"
+        // })
+      }
+    },
+    handleARTrackerState1({
+      detail
+    }) {
+      // 事件的值即为`ARTracker`实例
+      const tracker = detail.value;
+      // 获取当前状态和错误信息
+      const {
+        state,
+        errorMessage
+      } = tracker;
+      if (state == 2) {
+        this.setData({
+          isT2: true
+        })
+        wx.showToast({
+          title: "显示器"
+        })
+      }
+    },
+    handleARTrackerState2({
+      detail
+    }) {
+      // 事件的值即为`ARTracker`实例
+      const tracker = detail.value;
+      // 获取当前状态和错误信息
+      const {
+        state,
+        errorMessage
+      } = tracker;
+      if (state == 2) {
+        this.setData({
+          isT3: true
+        })
+        wx.showToast({
+          title: "药药药"
+        })
+      }
+    },
+    handleAssetsProgress() {
+      // console.log(arguments)
+
+    },
+    handleAssetsLoaded() {
+      // console.log(arguments)
+    },
+    handleGLTFLoaded({
+      detail
+    }) {
+      const el = detail.value.target;
+      const animator = el.getComponent("animator");
+      console.log('animator', animator)
+    }
+  }
+})

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

@@ -6,10 +6,21 @@ Component({
   data: {
     loaded: false,
     arReady: false,
+    isPlay: false,
+
   },
   lifetimes: {
     async attached() {
       console.log('data', this.data)
+    },
+    async detached() {
+      console.error('detached', this.video)
+      this.video && (this.video = null);
+      this.animator && (this.animator = null);
+      this.setData({
+        isPlay: false
+      })
+
     }
   },
   methods: {
@@ -59,12 +70,8 @@ Component({
         this.scene.getNodeById('setitem').visible = false;
         this.scene.ar.resetPlane();
       } else {
-        this.scene.ar.placeHere('setitem', true);
         console.error('show-gltf')
-        if (this.video) {
-          this.video.play()
-        }
-
+        this.showAndPlay();
       }
 
       this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
@@ -75,13 +82,53 @@ Component({
       const el = detail.value.target;
       console.error('handleGLTFLoaded')
       const gltf = el.getComponent("gltf");
-      const video = this.scene.assets.getAsset("video-texture", "cat");
-      const newMat = this.scene.assets.getAsset("material", "catMat");
-
+      const video = this.scene.assets.getAsset("video-texture", "animaV");
+      const newMat = this.scene.assets.getAsset("material", "matAnimaV");
       this.video = video
+      const animator = el.getComponent("animator");
+      this.animator = animator
+
+      console.log('animator', this.animator)
 
       for (const mesh of gltf.getPrimitivesByNodeName("video")) {
         mesh.material = newMat
+        mesh.material.setText
+      }
+    },
+
+    handleARTrackerState({
+      detail
+    }) {
+      const tracker = detail.value;
+      // 获取当前状态和错误信息
+      const {
+        state,
+        errorMessage
+      } = tracker;
+
+      console.log('tracker-state', tracker)
+      if (state == 2) {
+        wx.showToast({
+          title: "tracker"
+        })
+        this.showAndPlay();
+      }
+    },
+    showAndPlay() {
+      console.log('showAndPlay')
+      if (!this.data.isPlay) {
+        this.scene.ar.placeHere('setitem', true);
+        this.scene.getNodeById('setitem').visible = true;
+        this.setData({
+          isPlay: true
+        }, () => {
+          if (this.video) {
+            this.video.play()
+          }
+          if (this.animator) {
+            this.animator.play('Animation')
+          }
+        })
       }
     }
   }

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

@@ -4,25 +4,20 @@
     <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="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="cat" src="https://houseoss.4dkankan.com/mini-ar-test/AR/2/video.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:https://houseoss.4dkankan.com/mini-ar-test/AR/2/video.mp4?x-oss-process=video/snapshot,t_0,f_jpg,w_1000,m_fast,ar_auto" />
-
-    <xr-asset-material asset-id="catMat" effect="simple" uniforms="u_baseColorMap: video-cat" />
+    <xr-asset-load type="video-texture" asset-id="animaV" src="https://houseoss.4dkankan.com/mini-ar-test/AR/1/video.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:'https://houseoss.4dkankan.com/mini-ar-test/AR/1/video.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>
   <xr-node>
-    <xr-ar-tracker mode="Marker" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/marker/2dmarker-test.jpg">
-      <xr-gltf model="butterfly" anim-autoplay position="0.2 0 -0.2" scale="0.6 0.6 0.6" rotation="0 -50 0" />
-      <xr-gltf model="butterfly" anim-autoplay position="0.4 0 0.3" scale="0.5 0.5 0.5" rotation="0 -50 0" />
-      <xr-gltf model="butterfly" anim-autoplay position="-0.3 0 0.3" scale="0.4 0.4 0.4" rotation="0 -50 0" />
+    <xr-ar-tracker mode="Marker" src="https://houseoss.4dkankan.com/mini-ar-test/AR/1/marker.png" bind:ar-tracker-state="handleARTrackerState">
     </xr-ar-tracker>
 
     <xr-ar-tracker mode="Plane">
       <xr-gltf model="anchor" scale="0.2 0.2 0.2"></xr-gltf>
     </xr-ar-tracker>
     <xr-node node-id="setitem" visible="false">
-      <xr-gltf model="gltf-item" scale="0.008 0.008 0.008" rotation="0 -90 0" bind:gltf-loaded="handleGLTFLoaded"></xr-gltf>
+      <xr-gltf model="gltf-item" scale="0.5 0.5 0.5" rotation="0 0 0" bind:gltf-loaded="handleGLTFLoaded"></xr-gltf>
     </xr-node>
     <xr-camera id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
   </xr-node>

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

@@ -10,7 +10,15 @@ Component({
   lifetimes: {
     async attached() {
       console.log('data', this.data)
+    },
+    async detached() {
+      console.error('detached', this.video)
+      this.video = null;
+      this.setData({
+        isPlay: false
+      })
     }
+
   },
   methods: {
     handleReady({
@@ -58,14 +66,8 @@ Component({
         this.scene.getNodeById('setitem').visible = false;
         this.scene.ar.resetPlane();
       } else {
-        this.scene.ar.placeHere('setitem', true);
-        console.error('show-gltf')
-        if (this.video) {
-          this.video.play()
-        }
-
+        this.showAndPlay();
       }
-
       this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
     },
     handleGLTFLoaded({
@@ -82,6 +84,39 @@ Component({
       for (const mesh of gltf.getPrimitivesByNodeName("video")) {
         mesh.material = newMat
       }
+    },
+    handleARTrackerState({
+      detail
+    }) {
+      const tracker = detail.value;
+      // 获取当前状态和错误信息
+      const {
+        state,
+        errorMessage
+      } = tracker;
+
+      console.log('tracker-state', tracker)
+      if (state == 2) {
+        wx.showToast({
+          title: "tracker"
+        })
+        this.showAndPlay();
+      }
+    },
+
+    showAndPlay() {
+      console.log('showAndPlay')
+      if (!this.data.isPlay) {
+        this.scene.ar.placeHere('setitem', true);
+        this.scene.getNodeById('setitem').visible = true;
+        this.setData({
+          isPlay: true
+        }, () => {
+          if (this.video) {
+            this.video.play()
+          }
+        })
+      }
     }
   }
 })

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

@@ -5,24 +5,24 @@
     <!-- <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="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/video.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:https://houseoss.4dkankan.com/mini-ar-test/AR/2/video.mp4?x-oss-process=video/snapshot,t_0,f_jpg,w_1000,m_fast,ar_auto" />
 
     <xr-asset-material asset-id="catMat" effect="simple" uniforms="u_baseColorMap: video-cat" />
   </xr-assets>
   <xr-node>
-    <xr-ar-tracker mode="Marker" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/marker/2dmarker-test.jpg">
-      <xr-gltf model="butterfly" anim-autoplay position="0.2 0 -0.2" scale="0.6 0.6 0.6" rotation="0 -50 0" />
-      <xr-gltf model="butterfly" anim-autoplay position="0.4 0 0.3" scale="0.5 0.5 0.5" rotation="0 -50 0" />
-      <xr-gltf model="butterfly" anim-autoplay position="-0.3 0 0.3" scale="0.4 0.4 0.4" rotation="0 -50 0" />
+
+    <xr-ar-tracker mode="Marker" src="https://houseoss.4dkankan.com/mini-ar-test/AR/2/marker.png" bind:ar-tracker-state="handleARTrackerState">
     </xr-ar-tracker>
 
     <xr-ar-tracker mode="Plane">
       <xr-gltf model="anchor" scale="0.2 0.2 0.2"></xr-gltf>
     </xr-ar-tracker>
     <xr-node node-id="setitem" visible="false">
-      <xr-gltf model="gltf-item" scale="0.008 0.008 0.008" rotation="0 -90 0" bind:gltf-loaded="handleGLTFLoaded"></xr-gltf>
+      <xr-gltf model="gltf-item" scale="0.008 0.008 0.008" rotation="0 -90 0" bind:gltf-loaded="handleGLTFLoaded" cast-shadow receive-shadow></xr-gltf>
+      <xr-light type="ambient" color="1 1 1" intensity="2" />
+      <xr-light type="directional" rotation="80 10 0" color="1 1 1" intensity="3" />
     </xr-node>
     <xr-camera id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
   </xr-node>

miniprogram/components/xr-ar-vio-marker-3/index.js

@@ -1,3 +1,5 @@
+const xrFrameSystem = wx.getXrFrameSystem();
+
 Component({
   // behaviors: [require('../common/share-behavior').default],
   properties: {
@@ -11,6 +13,13 @@ Component({
   lifetimes: {
     async attached() {
       console.log('data', this.data)
+    },
+    async detached() {
+      console.error('detached', this.video)
+      this.animator && (this.animator = null);
+      this.setData({
+        isPlay: false
+      })
     }
   },
   methods: {
@@ -25,7 +34,6 @@ Component({
     handleAssetsProgress: function ({
       detail
     }) {
-      // console.log('assets progress', detail.value.progress);
       const progress =
         Math.floor(detail.value.progress * 100)
       this.triggerEvent('progress', progress)
@@ -59,13 +67,8 @@ Component({
         this.scene.getNodeById('setitem').visible = false;
         this.scene.ar.resetPlane();
       } else {
-        this.scene.ar.placeHere('setitem', true);
-        console.error('show-gltf')
-        if (!this.isPlay) {
-          this.setData({
-            isPlay: true
-          })
-        }
+        console.error('show-gltf', this.data.isPlay)
+        this.showAndPlay();
       }
 
       this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
@@ -74,15 +77,52 @@ Component({
       detail
     }) {
       const el = detail.value.target;
-      // console.error('handleGLTFLoaded')
-      // const gltf = el.getComponent("gltf");
-      // const video = this.scene.assets.getAsset("video-texture", "cat");
-      // const newMat = this.scene.assets.getAsset("material", "catMat");
-      // this.video = video
+      const animator = el.getComponent("animator");
+      this.animator = animator
+      console.warn('handleGLTFLoaded', animator)
+    },
+
+    handleARTrackerState({
+      detail
+    }) {
+      const tracker = detail.value;
+      // 获取当前状态和错误信息
+      const {
+        state,
+        errorMessage
+      } = tracker;
 
-      // for (const mesh of gltf.getPrimitivesByNodeName("video")) {
-      //   mesh.material = newMat
-      // }
+      console.log('tracker-state', tracker)
+      if (state == 2) {
+        wx.showToast({
+          title: "tracker"
+        })
+        this.showAndPlay();
+      }
+    },
+    showAndPlay() {
+      console.log('showAndPlay')
+      if (!this.data.isPlay) {
+        this.scene.ar.placeHere('setitem', true);
+        this.scene.getNodeById('setitem').visible = true;
+        this.setData({
+          isPlay: true
+        }, () => {
+          if (this.animator) {
+            if (this.animator) {
+              this.animator.play('Group21137Action', {
+                loop: 0
+              });
+              this.animator.play('polySurface1Action', {
+                loop: 0
+              });
+              this.animator.play('vlAction', {
+                loop: 0
+              });
+            }
+          }
+        })
+      }
     }
   }
 })

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

@@ -12,17 +12,16 @@
     <xr-asset-material asset-id="catMat" effect="simple" uniforms="u_baseColorMap: video-cat" />
   </xr-assets>
   <xr-node>
-    <xr-ar-tracker mode="Marker" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/marker/2dmarker-test.jpg">
-      <xr-gltf model="butterfly" anim-autoplay position="0.2 0 -0.2" scale="0.6 0.6 0.6" rotation="0 -50 0" />
-      <xr-gltf model="butterfly" anim-autoplay position="0.4 0 0.3" scale="0.5 0.5 0.5" rotation="0 -50 0" />
-      <xr-gltf model="butterfly" anim-autoplay position="-0.3 0 0.3" scale="0.4 0.4 0.4" rotation="0 -50 0" />
+    <xr-ar-tracker mode="Marker" src="https://houseoss.4dkankan.com/mini-ar-test/AR/3/marker.png" bind:ar-tracker-state="handleARTrackerState">
     </xr-ar-tracker>
 
     <xr-ar-tracker mode="Plane">
       <xr-gltf model="anchor" scale="0.2 0.2 0.2"></xr-gltf>
     </xr-ar-tracker>
     <xr-node node-id="setitem" visible="false">
-      <xr-gltf model="gltf-item" scale="0.008 0.008 0.008" rotation="-45 0 0"  bind:gltf-loaded="handleGLTFLoaded"></xr-gltf>
+      <xr-gltf model="gltf-item" scale="0.008 0.008 0.008" rotation="0 0 0" bind:gltf-loaded="handleGLTFLoaded" cast-shadow receive-shadow></xr-gltf>
+      <xr-light type="ambient" color="1 1 1" intensity="2" />
+      <xr-light type="directional" rotation="80 10 0" color="1 1 1" intensity="3" />
     </xr-node>
     <xr-camera id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
   </xr-node>

miniprogram/pages/children/children.wxml

@@ -1,7 +1,7 @@
 <view class="page">
   <navigation-bar title="{{'四维AR'}}" back="{{true}}" />
   <view class="loading" wx:if="{{!loaded}}">
-    <text>素材{{progress}}%载入中</text>
+    <text>{{progress}}%</text>
   </view>
   <xr-ar-vio-marker disable-scroll id="main-frame" width="{{renderWidth}}" height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;" bind:loaded="handleLoaded" 
   bind:progress="handleProgress"

miniprogram/pages/children/children.wxss

@@ -15,4 +15,8 @@
   align-items: center;
   flex-direction: column;
   background: #ffffff;
+  background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/bg.png');
+  background-position: center top;
+  background-size: cover;
+  background-repeat: no-repeat;
 }

miniprogram/pages/dunhuang/dunhuang.wxml

@@ -1,11 +1,9 @@
 <view class="page">
   <navigation-bar title="{{'四维AR'}}" back="{{true}}" />
   <view class="loading" wx:if="{{!loaded}}">
-    <text>素材{{progress}}%载入中</text>
+    <text>{{progress}}%</text>
   </view>
-  <xr-ar-vio-marker disable-scroll id="main-frame" width="{{renderWidth}}" height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;" bind:loaded="handleLoaded" 
-  bind:progress="handleProgress"
-  />
+  <xr-ar-vio-marker disable-scroll id="main-frame" width="{{renderWidth}}" height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;" bind:loaded="handleLoaded" bind:progress="handleProgress" />
 
 
 </view>

miniprogram/pages/dunhuang/dunhuang.wxss

@@ -15,4 +15,8 @@
   align-items: center;
   flex-direction: column;
   background: #ffffff;
+  background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/bg.png');
+  background-position: center top;
+  background-size: cover;
+  background-repeat: no-repeat;
 }

miniprogram/pages/myth/myth.wxml

@@ -1,7 +1,7 @@
 <view class="page">
   <navigation-bar title="{{'四维AR'}}" back="{{true}}" />
   <view class="loading" wx:if="{{!loaded}}">
-    <text>素材{{progress}}%载入中</text>
+    <text>{{progress}}%</text>
   </view>
   <xr-ar-vio-marker disable-scroll id="main-frame" width="{{renderWidth}}" height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;" bind:loaded="handleLoaded" 
   bind:progress="handleProgress"

miniprogram/pages/myth/myth.wxss

@@ -2,7 +2,6 @@
 .page {
   position: relative;
 }
-
 .loading {
   width: 100vw;
   height: 100vh;
@@ -15,4 +14,8 @@
   align-items: center;
   flex-direction: column;
   background: #ffffff;
+  background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/bg.png');
+  background-position: center top;
+  background-size: cover;
+  background-repeat: no-repeat;
 }

project.config.json

@@ -1,39 +1,39 @@
-{
-  "description": "项目配置文件",
-  "miniprogramRoot": "miniprogram/",
-  "compileType": "miniprogram",
-  "setting": {
-    "useCompilerPlugins": [
-      "typescript"
-    ],
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
-    },
-    "coverView": false,
-    "postcss": false,
-    "minified": false,
-    "enhance": true,
-    "showShadowRootInWxmlPanel": false,
-    "packNpmRelationList": [],
-    "ignoreUploadUnusedFiles": true,
-    "compileHotReLoad": false,
-    "skylineRenderEnable": true,
-    "es6": true
-  },
-  "simulatorType": "wechat",
-  "simulatorPluginLibVersion": {},
-  "condition": {},
-  "srcMiniprogramRoot": "miniprogram/",
-  "editorSetting": {
-    "tabIndent": "insertSpaces",
-    "tabSize": 2
-  },
-  "libVersion": "trial",
-  "packOptions": {
-    "ignore": [],
-    "include": []
-  },
-  "appid": "wxd55ee54235e90359"
+{
+  "description": "项目配置文件",
+  "miniprogramRoot": "miniprogram/",
+  "compileType": "miniprogram",
+  "setting": {
+    "useCompilerPlugins": [
+      "typescript"
+    ],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "coverView": false,
+    "postcss": false,
+    "minified": false,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": false,
+    "packNpmRelationList": [],
+    "ignoreUploadUnusedFiles": true,
+    "compileHotReLoad": false,
+    "skylineRenderEnable": true,
+    "es6": true
+  },
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "srcMiniprogramRoot": "miniprogram/",
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  },
+  "libVersion": "trial",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "appid": "wxd55ee54235e90359"
 }

project.private.config.json

@@ -1,9 +1,9 @@
-{
-  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "projectname": "mini-ar-demo",
-  "setting": {
-    "compileHotReLoad": true,
-    "skylineRenderEnable": true
-  },
-  "libVersion": "3.4.1"
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "mini-ar-demo",
+  "setting": {
+    "compileHotReLoad": true,
+    "skylineRenderEnable": true
+  },
+  "libVersion": "3.4.1"
 }

tsconfig.json

@@ -23,7 +23,7 @@
   },
   "include": [
     "./**/*.ts"
-, "miniprogram/components/xr-ar-vio-marker/index.js"  ],
+, "miniprogram/components/xr-ar-vio-marker/index.js", "miniprogram/components/ar-tracker/ar-tracker.js"  ],
   "exclude": [
     "node_modules"
   ]