gemercheung 1 gadu atpakaļ
vecāks
revīzija
bbd397bb7b

+ 48 - 14
miniprogram/components/ar-tracker/ar-tracker.js

@@ -14,10 +14,12 @@ Component({
     async detached() {
       console.error('detached')
       this.video1 && (this.video1 = 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,
@@ -48,6 +50,11 @@ Component({
       this.mat = new(wx.getXrFrameSystem().Matrix4)();
       console.log('xr-scene', xrScene)
       this.triggerEvent('ready')
+      this.innerAudioContext1 = wx.createInnerAudioContext({
+        useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项
+      })
+      this.innerAudioContext1.src = 'https://houseoss.4dkankan.com/mini-ar-test/AR/01/audio1.MP3'
+
     },
     handleARReady() {
       console.log('handleARReady')
@@ -76,19 +83,40 @@ Component({
       detail
     }) {
       const el = detail.value.target;
-      console.warn('item1 load')
+      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 newMat = this.scene.assets.getAsset("material", "item1-m");
+      const newMat2 = this.scene.assets.getAsset("material", "item12-m");
+
       this.video1 = video
-      // this.video1.onEnd = () => {}
+      this.video12 = video12
+
+      this.video1.onEnd = () => {
+        this.innerAudioContext1 && this.innerAudioContext1.play()
+        this.video12 && this.video12.play();
+
+      }
+
       const animator = el.getComponent("animator");
       this.animator1 = animator
-      console.warn('animator1', this.animator1)
-      for (const mesh of gltf.getPrimitivesByNodeName("video")) {
-        mesh.material = newMat
+      // getPrimitivesByNodeName
+      const othergltf = this.scene.assets.getAsset("gltf", "item1")
+      console.error('meshes', gltf.meshes)
+      // console.error('othergltf', othergltf)
+      for (const mesh of gltf.meshes) {
+        console.log(mesh.name)
+        if (mesh.name === 'mesh_video_16024video1') {
+          mesh.material = newMat
+          console.log('mesh', mesh)
+        }
+        // mesh.material = newMat
       }
-
+      // for (const mesh of gltf.getPrimitivesByMeshName("video2")) {
+      //   console.error('2有video2')
+      //   mesh.material = newMat2
+      // }
     },
     handleItem2Loaded({
       detail
@@ -99,7 +127,9 @@ Component({
       const video = this.scene.assets.getAsset("video-texture", "item2-v");
       const newMat = this.scene.assets.getAsset("material", "item2-m");
       this.video2 = video
+
       for (const mesh of gltf.getPrimitivesByNodeName("video")) {
+        console.error('2有video')
         mesh.material = newMat
       }
     },
@@ -118,10 +148,13 @@ Component({
         if (type === 1) {
           console.warn('play 1')
           if (this.video1) {
-            this.data.isStartPlay1 ? this.video1.resume() : this.video1.play()
+            // this.data.isStartPlay1 ? this.video1.resume() : this.video1.play()
+            // this.data.isStartPlay1 ?  this.innerAudioContext1.resume() : this.innerAudioContext1.play()
+            // this.video1.play()
           }
           if (this.animator1) {
-            this.data.isStartPlay1 ? this.animator1.resume('Animation') : this.animator1.play('Animation')
+            // this.data.isStartPlay1 ? this.animator1.resume('dd') : this.animator1.play('dd')
+            this.animator1.play('dd')
           }
           this.setData({
             isStartPlay1: true
@@ -166,12 +199,13 @@ Component({
     pause(type) {
       if (type === 1) {
         console.warn('pause 1')
-        if (this.video1) {
-          this.video1.pause()
-        }
-        if (this.animator1) {
-          this.animator1.pause('Animation')
-        }
+
+        // if (this.video1) {
+        //   this.video1.pause()
+        // }
+        // if (this.animator1) {
+        //   this.animator1.pause('Animation')
+        // }
       }
       if (type === 2) {
         console.warn('pause 2')

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

@@ -2,13 +2,17 @@
 
   <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="item1" src="https://houseoss.4dkankan.com/mini-ar-test/AR/01/dd3/dd3.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/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-load type="video-texture" asset-id="item1-v" src="https://houseoss.4dkankan.com/mini-ar-test/AR/01/video1.mp4" options="autoPlay:false,loop:false,abortAudio:false,placeHolder:'https://houseoss.4dkankan.com/mini-ar-test/AR/01/video1.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="item12-v" src="https://houseoss.4dkankan.com/mini-ar-test/AR/01/video2.mp4" options="autoPlay:true,loop:true,abortAudio:true,placeHolder:'https://houseoss.4dkankan.com/mini-ar-test/AR/01/video2.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="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" />
 
@@ -17,21 +21,20 @@
   <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="handleARTrackerState1">
-      <xr-gltf model="item1" scale="5 5 5" rotation="270 0 0" bind:gltf-loaded="handleItem1Loaded"></xr-gltf>
+    <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" scale="5 5 5" rotation="270 0 0" bind:gltf-loaded="handleItem1Loaded"></xr-gltf> -->
+      <xr-gltf model="item1" position="-0.06 0 0.85"  scale="11 11 11" 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.5" states="alphaMode:BLEND" /> -->
     </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-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> -->
@@ -42,12 +45,9 @@
 
   </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" />
-    <xr-light type="directional" rotation="90 60 0" color="1 1 1" intensity="1" />
+    <xr-light type="ambient" color="1 1 1" intensity="1" />
+    <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="2" />
   </xr-node>
 
 </xr-scene>

+ 2 - 1
miniprogram/components/xr-ar-scan-marker/index.js

@@ -30,6 +30,8 @@ Component({
       this.mat = new(wx.getXrFrameSystem().Matrix4)();
       console.log('xr-scene', xrScene)
       this.triggerEvent('ready')
+
+      
     },
     handleAssetsProgress: function ({
       detail
@@ -47,7 +49,6 @@ Component({
       this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
       this.triggerEvent('loaded')
 
-
     },
     handleARReady: function ({
       detail

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

@@ -22,6 +22,6 @@
   </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-light type="directional" rotation="180 0 0" color="1 1 1" intensity="2" />
   </xr-node>
 </xr-scene>