feat: test

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

@@ -19,15 +19,70 @@ Component({
    * 组件的方法列表
    */
   methods: {
-    handleReady() {
-      console.log('handleReady')
+    handleReady({
+      detail
+    }) {
+      const xrScene = this.scene = detail.value;
+      this.mat = new(wx.getXrFrameSystem().Matrix4)();
+      console.log('xr-scene', xrScene)
+      this.triggerEvent('ready')
     },
     handleARReady() {
       console.log('handleARReady')
     },
-    handleLog(log) {
-      console.log('log', log)
+
+    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')
+
+    },
+    handleItem1Loaded({
+      detail
+    }) {
+      const el = detail.value.target;
+      console.warn('item1 load')
+      const gltf = el.getComponent("gltf");
+      const video = this.scene.assets.getAsset("video-texture", "item1-v");
+      const newMat = this.scene.assets.getAsset("material", "item1-m");
+      this.video1 = video
+      this.video1.onEnd = () => {}
+      const animator = el.getComponent("animator");
+      this.animator1 = animator
+      console.log('animator', this.animator)
+      for (const mesh of gltf.getPrimitivesByNodeName("video")) {
+        mesh.material = newMat
+      }
+
+    },
+    handleItem2Loaded() {
+
     },
+    handleItem3Loaded() {
+
+    },
+    play(type) {
+      if (type === 1) {
+        this.scene.getNodeById('setitem1').visible = true;
+        if (this.video1) {
+          this.video1.play()
+        }
+        if (this.animator1) {
+          this.animator1.play('Animation')
+        }
+      }
+    },
+
     handleARTrackerState({
       detail
     }) {
@@ -39,8 +94,10 @@ Component({
         errorMessage
       } = tracker;
       if (state == 2) {
-
-        this.triggerEvent('scan', 1)
+        wx.showToast({
+          title: '1',
+        })
+        this.play(1)
       }
     },
     handleARTrackerState1({
@@ -54,10 +111,7 @@ Component({
         errorMessage
       } = tracker;
       if (state == 2) {
-        wx.showToast({
-          title: "2"
-        })
-        this.triggerEvent('scan', 2)
+
       }
     },
     handleARTrackerState2({
@@ -70,14 +124,7 @@ Component({
         state,
         errorMessage
       } = tracker;
-      if (state == 2) {
-        wx.showToast({
-          title: "3"
-        })
-        this.triggerEvent('scan', 3)
-      }
-    },
-    handleAssetsProgress() {},
-    handleAssetsLoaded() {},
+      if (state == 2) {}
+    }
   }
 })

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

@@ -1,9 +1,21 @@
 <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="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" />
-  </xr-assets> -->
+
+  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
+
+    <xr-asset-load type="gltf" asset-id="item1" src="https://houseoss.4dkankan.com/mini-ar-test/AR/1/anima4.glb" />
+    <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/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="item1-m" effect="simple" uniforms="u_baseColorMap: video-item1-v" />
+
+    <xr-asset-load type="video-texture" asset-id="item2-v" 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="item2-m" effect="simple" uniforms="u_baseColorMap: video-item2-v" />
+
+  </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/1/marker.png" bind:ar-tracker-state="handleARTrackerState">
     </xr-ar-tracker>
@@ -12,8 +24,12 @@
     <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="handleARTrackerState2">
     </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="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="camera" node-id="camera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
+  </xr-node>
 
+  <xr-node node-id="setitem1" visible="false">
+    <xr-gltf model="item1" scale="0.5 0.5 0.5" rotation="0 0 0" bind:gltf-loaded="handleItem1Loaded"></xr-gltf>
   </xr-node>
   <xr-node node-id="lights">
     <xr-light type="ambient" color="1 1 1" intensity="2" />

miniprogram/components/xr-ar-scan-marker/index.js

@@ -0,0 +1,136 @@
+Component({
+  properties: {
+    fromScan: Boolean
+  },
+  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: {
+    handleReady({
+      detail
+    }) {
+      const xrScene = this.scene = detail.value;
+      this.mat = new(wx.getXrFrameSystem().Matrix4)();
+      console.log('xr-scene', xrScene)
+      this.triggerEvent('ready')
+    },
+    handleAssetsProgress: function ({
+      detail
+    }) {
+      // console.log('assets progress', detail.value.progress);
+      const progress =
+        Math.floor(detail.value.progress * 100)
+      this.triggerEvent('progress', progress)
+    },
+    handleAssetsLoaded: function ({
+      detail
+    }) {
+      console.log('assets loaded', detail.value);
+      const el = detail.value.target;
+      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
+      this.triggerEvent('loaded')
+
+
+    },
+    handleARReady: function ({
+      detail
+    }) {
+      console.log('arReady', this.scene.ar.arVersion);
+    },
+    placeNode(event) {
+      const {
+        clientX,
+        clientY
+      } = event.touches[0];
+      const {
+        frameWidth: width,
+        frameHeight: height
+      } = this.scene;
+
+      if (clientY / height > 0.8 && clientX / width < 0.2) {
+        this.scene.getNodeById('setitem').visible = false;
+        this.scene.ar.resetPlane();
+      } else {
+        console.error('show-gltf')
+        this.showAndPlay();
+      }
+
+      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
+    },
+    handleGLTFLoaded({
+      detail
+    }) {
+      const el = detail.value.target;
+      console.error('handleGLTFLoaded')
+      const gltf = el.getComponent("gltf");
+      const video = this.scene.assets.getAsset("video-texture", "animaV");
+      const newMat = this.scene.assets.getAsset("material", "matAnimaV");
+      this.video = video
+      this.video.onEnd = () => {
+
+      }
+      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')
+      this.scene.ar.placeHere('setitem', true);
+      if (!this.data.isPlay) {
+        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-scan-marker/index.json

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

miniprogram/components/xr-ar-scan-marker/index.wxml

@@ -0,0 +1,25 @@
+<xr-scene ar-system="modes:Plane Marker; planeMode: 1" bind:ready="handleReady" bind:ar-ready="handleARReady">
+  <!-- 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://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/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://houseoss.4dkankan.com/mini-ar-test/AR/1/marker.png" bind:ar-tracker-state="handleARTrackerState">
+    </xr-ar-tracker>
+
+
+    <xr-node node-id="setitem" visible="false">
+      <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>
+  <xr-node node-id="lights">
+    <xr-light type="ambient" color="1 1 1" intensity="1" />
+    <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="3" />
+  </xr-node>
+</xr-scene>

miniprogram/components/xr-ar-scan-marker/index.wxss

@@ -0,0 +1 @@
+/* xr/index.wxss */

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

@@ -97,11 +97,6 @@ Component({
         mesh.material = newMat
         mesh.material.setText
       }
-
-      if (this.data.fromScan) {
-        console.log('fromScan', this.data.fromScan);
-        this.showAndPlay();
-      }
     },
 
     handleARTrackerState({
@@ -137,7 +132,7 @@ Component({
             this.animator.play('Animation')
           }
         })
-      }
+      } 
     }
   }
 })

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

@@ -2,16 +2,15 @@
   <!-- 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/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/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://houseoss.4dkankan.com/mini-ar-test/AR/1/marker.png" bind:ar-tracker-state="handleARTrackerState">
-    </xr-ar-tracker>
+    <!-- <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>

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

@@ -12,9 +12,9 @@
     <xr-asset-material asset-id="catMat" effect="simple" uniforms="u_baseColorMap: video-cat" />
   </xr-assets>
   <xr-node>
-
+    <!-- 
     <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> -->
 
     <xr-ar-tracker mode="Plane">
       <xr-gltf model="anchor" scale="0.2 0.2 0.2"></xr-gltf>

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

@@ -18,7 +18,8 @@ Component({
       console.error('detached', this.video)
       this.animator && (this.animator = null);
       this.setData({
-        isPlay: false
+        isPlay: false,
+        fromScan: false
       })
     }
   },
@@ -80,10 +81,10 @@ Component({
       const animator = el.getComponent("animator");
       this.animator = animator
       console.warn('handleGLTFLoaded', animator)
-      if (this.data.fromScan) {
-        console.log('fromScan', this.data.fromScan);
-        this.showAndPlay();
-      }
+      // if (this.data.fromScan) {
+      //   console.log('fromScan', this.data.fromScan);
+      //   this.showAndPlay();
+      // }
     },
 
     handleARTrackerState({

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

@@ -12,8 +12,8 @@
     <xr-asset-material asset-id="catMat" effect="simple" uniforms="u_baseColorMap: video-cat" />
   </xr-assets>
   <xr-node>
-    <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="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>

miniprogram/pages/dunhuang/dunhuang.ts

@@ -84,7 +84,6 @@ Page({
 
   },
   handleLoaded() {
-
     this.setData({ loaded: true })
   },
   handleProgress(event: WechatMiniprogram.TouchEvent) {

miniprogram/pages/dunhuang/dunhuang.wxml

@@ -3,7 +3,6 @@
   <view class="loading" wx:if="{{!loaded}}">
     <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" fromScan="{{fromScan}}" />
-
+  <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/index/index.wxml

@@ -28,9 +28,9 @@
       <text>扫一扫</text>
       <image class="icon" src="https://houseoss.4dkankan.com/mini-ar-test/assets/icon.png"></image>
     </view>
-    <view class="upload">
+    <!-- <view class="upload">
       <text>从照片上传 > </text>
-    </view>
+    </view> -->
   </view>
 
 </view>

miniprogram/pages/scaner/scaner.json

@@ -1,5 +1,5 @@
 {
-  "component": true,
+    "component": true,
   "navigationBarTitleText": "四维AR",
   "navigationBarTextStyle": "black",
   "disableScroll": true,

miniprogram/pages/scaner/scaner.ts

@@ -9,6 +9,7 @@ Page({
     height: 300,
     renderWidth: 300,
     renderHeight: 300,
+    loaded: false
 
   },
 
@@ -76,28 +77,12 @@ Page({
   onShareAppMessage() {
 
   },
-  handleScan(event: WechatMiniprogram.TouchEvent) {
-    console.log('handleScan', event.detail)
-    const type = Number(event.detail)
-    wx.showToast({
-      title: `type-${type}`
-    })
-
-    if (type === 1) {
-      wx.redirectTo({
-        url: "/pages/dunhuang/dunhuang?fromScan=1",
-      })
-    }
-    if (type === 2) {
-      wx.redirectTo({
-        url: "/pages/myth/myth?fromScan=1",
-      })
-    }
-    if (type === 3) {
-      wx.redirectTo({
-        url: "/pages/children/children?fromScan=1",
-      })
-    }
-
+  handleProgress(event: WechatMiniprogram.TouchEvent) {
+    console.log('progress', event.detail)
+    const val = Number(event.detail) || 0
+    this.setData({ progress: val })
+  },
+  handleLoaded() {
+    this.setData({ loaded: true })
   }
 })

miniprogram/pages/scaner/scaner.wxml

@@ -1,7 +1,8 @@
 <view class="page">
-  <navigation-bar title="{{'四维AR'}}" back="{{true}}" />
-  <!-- <view class="loading" wx:if="{{!loaded}}">
-    <text>{{progress}}%</text>
-  </view> -->
-  <ar-tracker disable-scroll id="main-frame" width="{{renderWidth}}" height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;" bind:scan="handleScan" />
+  <!-- <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>
+  <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>

miniprogram/pages/scaner/scaner.wxss

@@ -3,4 +3,25 @@ page {
   height: 100vh;
   display: flex;
   flex-direction: column;
+}
+
+.loading {
+  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;
+}
+
+.loading image {
+  width: 140px;
+  height: 140px;
+  fill: white;
+  color: white;
 }