feat: test

miniprogram/app.json

@@ -1,7 +1,10 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/dunhuang/dunhuang"
+    "pages/dunhuang/dunhuang",
+    "pages/myth/myth",
+    "pages/scaner/scaner",
+    "pages/children/children"
   ],
   "window": {
     "navigationBarTextStyle": "black",

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

@@ -9,7 +9,7 @@
 
     <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-asset-material asset-id="catMat" effect="simple" uniforms="u_baseColorMap: video-cat" /> -->
 
   </xr-assets>
   <xr-env env-data="xr-frame-team-workspace-day" />

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

@@ -0,0 +1,60 @@
+Component({
+  // behaviors: [require('../common/share-behavior').default],
+  properties: {
+    a: Number,
+  },
+  data: {
+    loaded: false,
+    arReady: false,
+  },
+  lifetimes: {
+    async attached() {
+      console.log('data', this.data)
+    }
+  },
+  methods: {
+    handleReady({
+      detail
+    }) {
+      const xrScene = this.scene = detail.value;
+      this.mat = new(wx.getXrFrameSystem().Matrix4)();
+      console.log('xr-scene', xrScene);
+    },
+    handleAssetsProgress: function ({
+      detail
+    }) {
+      console.log('assets progress', detail.value);
+    },
+    handleAssetsLoaded: function ({
+      detail
+    }) {
+      console.log('assets loaded', detail.value);
+      // this.setData({loaded: true});
+      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
+    },
+    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 {
+        this.scene.ar.placeHere('setitem', true);
+      }
+
+      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
+    }
+  }
+})

miniprogram/components/xr-ar-vio-marker copy/index.json

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

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

@@ -0,0 +1,30 @@
+<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://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/just_a_girl/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-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>
+
+    <xr-ar-tracker mode="Plane">
+      <xr-gltf model="anchor"></xr-gltf>
+    </xr-ar-tracker>
+    <xr-node node-id="setitem" visible="false">
+      <xr-gltf model="gltf-item" scale="0.006 0.006 0.006"></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-vio-marker copy/index.wxss

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

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

@@ -0,0 +1,84 @@
+Component({
+  // behaviors: [require('../common/share-behavior').default],
+  properties: {
+    a: Number,
+  },
+  data: {
+    loaded: false,
+    arReady: false,
+  },
+  lifetimes: {
+    async attached() {
+      console.log('data', this.data)
+    }
+  },
+  methods: {
+    handleReady({
+      detail
+    }) {
+      const xrScene = this.scene = detail.value;
+      this.mat = new(wx.getXrFrameSystem().Matrix4)();
+      console.log('xr-scene', xrScene);
+      wx.showLoading({
+        title: 'loading...',
+      })
+    },
+    handleAssetsProgress: function ({
+      detail
+    }) {
+      console.log('assets progress', detail.value);
+    },
+    handleAssetsLoaded: function ({
+      detail
+    }) {
+      console.log('assets loaded', detail.value);
+      const el = detail.value.target;
+      // this.setData({loaded: true});
+      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
+      wx.hideLoading()
+
+    },
+    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 {
+        this.scene.ar.placeHere('setitem', true);
+        console.error('show-gltf')
+
+      }
+
+      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 vt = this.scene.assets.getAsset("texture", "video-cat");
+      const newMat = this.scene.assets.getAsset("material", "catMat");
+      console.log('vt', vt)
+
+      for (const mesh of gltf.getPrimitivesByNodeName("video")) {
+
+        mesh.material = newMat
+        // mesh.material.setTexture("u_baseColorMap", vt);
+      }
+    }
+  }
+})

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

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

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

@@ -0,0 +1,33 @@
+<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://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/video.mp4" options="autoPlay:true,loop:true,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>
+
+    <xr-ar-tracker mode="Plane">
+      <xr-gltf model="anchor"></xr-gltf>
+    </xr-ar-tracker>
+    <xr-node node-id="setitem" visible="false">
+      <xr-gltf model="gltf-item" scale="0.006 0.006 0.006" rotation="0 -90 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-vio-marker-1/index.wxss

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

miniprogram/pages/children/children.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

miniprogram/pages/children/children.ts

@@ -0,0 +1,66 @@
+// pages/children/children.ts
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

miniprogram/pages/children/children.wxml

@@ -0,0 +1,2 @@
+<!--pages/children/children.wxml-->
+<text>pages/children/children.wxml</text>

miniprogram/pages/children/children.wxss

@@ -0,0 +1 @@
+/* pages/children/children.wxss */

miniprogram/pages/dunhuang/dunhuang.json

@@ -1,3 +1,8 @@
 {
-  "usingComponents": {}
+  "disableScroll": true,
+  "renderer": "webview",
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "xr-ar-vio-marker": "/components/xr-ar-vio-marker-1/index"
+  }
 }

miniprogram/pages/dunhuang/dunhuang.ts

@@ -5,14 +5,25 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    width: 300,
+    height: 300,
+    renderWidth: 300,
+    renderHeight: 300,
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad() {
-
+    const info = wx.getSystemInfoSync();
+    const width = info.windowWidth;
+    const height = info.windowHeight;
+    const dpi = info.pixelRatio;
+    this.setData({
+      width, height,
+      renderWidth: width * dpi,
+      renderHeight: height * dpi
+    });
   },
 
   /**

miniprogram/pages/dunhuang/dunhuang.wxml

@@ -1,2 +1,7 @@
-<!--pages/dunhuang/dunhuang.wxml-->
-<text>pages/dunhuang/dunhuang.wxml</text>
+<view>
+  <navigation-bar title="{{'四维AR'}}" back="{{true}}" />
+
+  <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:arTrackerState="handleARTrackerState" />
+
+
+</view>

miniprogram/pages/index/index.ts

@@ -1,26 +1,87 @@
-// index.ts
-// 获取应用实例
-const app = getApp<IAppOption>()
-Component({
+// pages/index/index.ts
+Page({
+
+  /**
+   * 页面的初始数据
+   */
   data: {
-    width: 300,
-    height: 300,
-    renderWidth: 300,
-    renderHeight: 300,
-  },
-  methods: {
-    // 事件处理函数
-    onLoad() {
-      const info = wx.getSystemInfoSync();
-      const width = info.windowWidth;
-      const height = info.windowHeight;
-      const dpi = info.pixelRatio;
-      this.setData({
-        width, height,
-        renderWidth: width * dpi,
-        renderHeight: height * dpi
-      });
-    },
- 
-  },
-})
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+
+  },
+
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  goToScan() {
+    wx.navigateTo({
+      url: "/pages/scaner/scaner"
+    })
+  },
+  goToDuangHang() {
+    wx.navigateTo({
+      url: "/pages/dunhuang/dunhuang",
+    })
+  },
+  goToMyth() {
+    wx.navigateTo({
+      url: "/pages/myth/myth",
+    })
+  },
+  goToChild() {
+    wx.navigateTo({
+      url: "pages/children/children"
+    })
+  }
+})

miniprogram/pages/index/index.wxml

@@ -1,20 +1,21 @@
 <view class="page">
+  <navigation-bar title="{{'四维AR'}}" back="{{false}}" />
   <view class="top">
-    <view class="section">
+    <view class="section" bindtap='goToDuangHang'>
       <view class="cover cover1"></view>
       <view class="text">
         <text> “敦敦”带您游览敦煌千年</text>
       </view>
 
     </view>
-    <view class="section">
+    <view class="section" bindtap='goToMyth'>
       <view class="cover cover2"></view>
       <view class="text">
         <text> 3D巨制动画|聆听中国千年神话故事</text>
       </view>
 
     </view>
-    <view class="section">
+    <view class="section" bindtap='goToChild'>
       <view class="cover cover3"></view>
       <view class="text">
         <text> “牧童归家”|3D数字重现古代文化</text>
@@ -23,7 +24,13 @@
 
   </view>
   <view class="bottom">
-
+    <view class="scan" bindtap='goToScan'>
+      <text>扫一扫</text>
+      <image class="icon" src="https://houseoss.4dkankan.com/mini-ar-test/assets/icon.png"></image>
+    </view>
+    <view class="upload">
+      <text>从照片上传 > </text>
+    </view>
   </view>
 
 </view>

miniprogram/pages/index/index.wxss

@@ -11,7 +11,7 @@
 }
 
 .top {
-  padding-top: 15vh;
+  padding-top: 0;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -27,8 +27,7 @@
   justify-content: flex-start;
   margin-bottom: 25px;
   position: relative;
-
-
+  color: #a59d99;
 }
 
 .section .cover {
@@ -69,17 +68,59 @@
   align-items: flex-end;
   padding: 0 10px;
   padding-bottom: 5px;
-  box-shadow: 2px 6px 14px 3px rgb(0 0 0 / 20%);
-}
-
+  box-shadow: 2px 3px 6px 2px rgb(0 0 0 / 15%);
 
+}
 
 .section2 {
   background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic2.png');
-
 }
 
 .section3 {
   background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic3.png');
+}
+
+.bottom {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 80px;
+}
+
+.scan {
+  background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/btn.png');
+  width: 176px;
+  height: 46px;
+  font-size: 18px;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.scan .icon {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.scan text {
+  margin-left: -20px;
+}
+
+.upload {
+  padding-top: 10px;
+}
+
+.upload text {
+  font-size: 14px;
+  color: #b09369;
+
 
 }

miniprogram/pages/myth/myth.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

miniprogram/pages/myth/myth.ts

@@ -0,0 +1,66 @@
+// pages/myth/myth.ts
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

miniprogram/pages/myth/myth.wxml

@@ -0,0 +1,2 @@
+<!--pages/myth/myth.wxml-->
+<text>pages/myth/myth.wxml</text>

miniprogram/pages/myth/myth.wxss

@@ -0,0 +1 @@
+/* pages/myth/myth.wxss */

miniprogram/pages/scaner/scaner.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ar-tracker": "/components/ar-tracker/ar-tracker"
+  }
+}

miniprogram/pages/scaner/scaner.ts

@@ -0,0 +1,78 @@
+// pages/scaner/scaner.ts
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    width: 300,
+    height: 300,
+    renderWidth: 300,
+    renderHeight: 300,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+    const info = wx.getSystemInfoSync();
+    const width = info.windowWidth;
+    const height = info.windowHeight;
+    const dpi = info.pixelRatio;
+    this.setData({
+      width, height,
+      renderWidth: width * dpi,
+      renderHeight: height * dpi
+    });
+  },
+
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

miniprogram/pages/scaner/scaner.wxml

@@ -0,0 +1 @@
+<ar-tracker disable-scroll id="main-frame" width="{{renderWidth}}" height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;" />

miniprogram/pages/scaner/scaner.wxss

@@ -0,0 +1,6 @@
+/* pages/scaner/scaner.wxss */
+page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}

tsconfig.json

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