WXXR/miniprogram/components/xr-classic-show/index.js

Component({
  behaviors: [require('../common/share-behavior').default],
  properties: {
    captureState: {
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          if (newVal === 1) {
            this.capture();
           
          }
        }
      },
    },
    recordState: {
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          if (newVal === 0) {
            this.recordEnd();
          } else {
            this.recordStart();
          }
        }
      }
    },
    captureQuality: {
      type: Number,
      value: 0.8,
    },
    captureType: {
      type: String,
      value: 'jpg',
    },
    recordFPS: {
      type: Number,
      value: 30,
    },
    recordWidth: {
      type: Number,
      value: undefined,
    },
    recordHeight: {
      type: Number,
      value: undefined,
    },
    recordBPS: {
      type: Number,
      value: 1000,
    },
    uiShowModelView:{
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {
      
        if (newVal !== oldVal) {
          if(newVal){
            //this.ShowModel(1);
          }else{
            this.CloseModel();
          }
        }     
      },
    },   
    uiShowIndex:{
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.ShowModel(newVal);
        }
      },
    }
  },
  data: {
    loaded: false,
    loadedSaoMiao:false,
    loaded: false,
    arReady: false,
    loaded2:false,
    position2:[0,0,0],
    rot:0,
    str:"1",
    luanniaoShow:false,
    fuzhuShow:false,
    yinglongShow:false,
    nianshouShow:false,
    sceneHight:600,
    sceneWidth:600
  },

  lifetimes: {
    async attached() {
      console.log('data', this.data);
    }
  },
  methods: {
    handleReady: function ({detail}) {
      const xrScene = this.scene = detail.value;
      console.log('xr-scene', xrScene);

      var hight = this.scene.hight;
      var width = this.scene.width;
      this.setData({sceneHight:hight});
      this.setData({sceneWidth:width});

      this.binglong = {el:this.scene.getElementById('binglong')};

      const scene = this.scene = detail.value;
      const appHide = () => this.scene.share.recordPause();
      const appShow = () => this.scene.share.recordResume();
      wx.onAppHide(appHide);
      wx.onAppShow(appShow);
      wx.offAppHide(appHide);
      wx.offAppShow(appShow);
      
      this.triggerEvent('sceneReady', {width: scene.width, height: scene.height});



      const fireworkField = xrScene.getElementById("firework");
      const tempSystem = fireworkField.getComponent('custom-particle')
      tempSystem.addSizeGradient(0,0.2);
      tempSystem.addSizeGradient(3,1);
      var myData ={}
      myData = {
        "capacity": 100,
        "emitRate": 0,  //子发射器不进行每秒发射
        "burstCount": 100, // 一次爆发200粒子
        "burstTime": 0, // 爆发延时为0
        "burstCycle": 1, // 发射一次
        "size":[0.05],
        "startColor":[1,0.3,0.1,1],
        "endColor":[1,1,1,0],
        "emitterType":"SphereShape",
        "emitterProps": [["radius","0.5"]],
        "lifeTime":[1], // 粒子生命周期为3秒
        "stopDuration":[2], // 子发射器生命周期为3秒
        "speed":"2",
        "texture":"flarePicture"
      }
      var subEmitter = tempSystem.createSubEmitter(myData)
      subEmitter.state = 1 // 设置为1为当粒子消失后出现作用子发射器
      //可以规定多个子发射器的阵列
      tempSystem.subEmitters = [subEmitter]


      const fireworkField2 = xrScene.getElementById("firework2");
      const tempSystem2 = fireworkField2.getComponent('custom-particle')
      tempSystem2.addSizeGradient(0,0.2);
      tempSystem2.addSizeGradient(3,1);
      var myData2 ={}
      myData2 = {
        "capacity": 100,
        "emitRate": 0,  //子发射器不进行每秒发射
        "burstCount": 100, // 一次爆发200粒子
        "burstTime": 0.1, // 爆发延时为0
        "burstCycle": 1, // 发射一次
        "size":[0.05],
        "startColor":[1,0.5,0.8,1],
        "endColor":[1,1,1,0],
        "emitterType":"SphereShape",
        "emitterProps": [["radius","0.5"]],
        "lifeTime":[1], // 粒子生命周期为3秒
        "stopDuration":[2], // 子发射器生命周期为3秒
        "speed":"2",
        "texture":"flarePicture"
      }
      var subEmitter2 = tempSystem2.createSubEmitter(myData2)
      subEmitter2.state = 1 // 设置为1为当粒子消失后出现作用子发射器
      //可以规定多个子发射器的阵列
      tempSystem2.subEmitters = [subEmitter2]

      const fireworkField3 = xrScene.getElementById("firework3");
      const tempSystem3 = fireworkField3.getComponent('custom-particle')
      tempSystem3.addSizeGradient(0,0.2);
      tempSystem3.addSizeGradient(3,1);
      var myData3 ={}
      myData3 = {
        "capacity": 100,
        "emitRate": 0,  //子发射器不进行每秒发射
        "burstCount": 100, // 一次爆发200粒子
        "burstTime": 0.1, // 爆发延时为0
        "burstCycle": 1, // 发射一次
        "size":[0.05],
        "startColor":[1,1,0.5,1],
        "endColor":[1,1,1,0],
        "emitterType":"SphereShape",
        "emitterProps": [["radius","0.5"]],
        "lifeTime":[1], // 粒子生命周期为3秒
        "stopDuration":[2], // 子发射器生命周期为3秒
        "speed":"2",
        "texture":"flarePicture"
      }
      var subEmitter3 = tempSystem3.createSubEmitter(myData3)
      subEmitter3.state = 1 // 设置为1为当粒子消失后出现作用子发射器
      //可以规定多个子发射器的阵列
      tempSystem3.subEmitters = [subEmitter3]

      const fireworkField4 = xrScene.getElementById("firework4");
      const tempSystem4 = fireworkField4.getComponent('custom-particle')
      tempSystem4.addSizeGradient(0,0.2);
      tempSystem4.addSizeGradient(3,1);
      var myData4 ={}
      myData4 = {
        "capacity": 100,
        "emitRate": 0,  //子发射器不进行每秒发射
        "burstCount": 100, // 一次爆发200粒子
        "burstTime": 0.1, // 爆发延时为0
        "burstCycle": 1, // 发射一次
        "size":[0.05],
        "startColor":[1,0.5,0.8,1],
        "endColor":[1,1,1,0],
        "emitterType":"SphereShape",
        "emitterProps": [["radius","0.5"]],
        "lifeTime":[1], // 粒子生命周期为3秒
        "stopDuration":[2], // 子发射器生命周期为3秒
        "speed":"2",
        "texture":"flarePicture"
      }
      var subEmitter4 = tempSystem4.createSubEmitter(myData4)
      subEmitter4.state = 1 // 设置为1为当粒子消失后出现作用子发射器
      //可以规定多个子发射器的阵列
      tempSystem4.subEmitters = [subEmitter4]

      const fireworkField5 = xrScene.getElementById("firework5");
      const tempSystem5 = fireworkField5.getComponent('custom-particle')
      tempSystem5.addSizeGradient(0,0.2);
      tempSystem5.addSizeGradient(3,1);
      var myData5 ={}
      myData5 = {
        "capacity": 100,
        "emitRate": 0,  //子发射器不进行每秒发射
        "burstCount": 100, // 一次爆发200粒子
        "burstTime": 0.1, // 爆发延时为0
        "burstCycle": 1, // 发射一次
        "size":[0.05],
        "startColor":[1,1,0.5,1],
        "endColor":[1,1,1,0],
        "emitterType":"SphereShape",
        "emitterProps": [["radius","0.5"]],
        "lifeTime":[1], // 粒子生命周期为3秒
        "stopDuration":[2], // 子发射器生命周期为3秒
        "speed":"2",
        "texture":"flarePicture"
      }
      var subEmitter5 = tempSystem5.createSubEmitter(myData5)
      subEmitter5.state = 1 // 设置为1为当粒子消失后出现作用子发射器
      //可以规定多个子发射器的阵列
      tempSystem5.subEmitters = [subEmitter5]

      const fireworkField6 = xrScene.getElementById("firework6");
      const tempSystem6 = fireworkField6.getComponent('custom-particle')
      tempSystem6.addSizeGradient(0,0.2);
      tempSystem6.addSizeGradient(3,1);
      var myData6 ={}
      myData6= {
        "capacity": 100,
        "emitRate": 0,  //子发射器不进行每秒发射
        "burstCount": 100, // 一次爆发200粒子
        "burstTime": 0.1, // 爆发延时为0
        "burstCycle": 1, // 发射一次
        "size":[0.05],
        "startColor":[1,0.3,0.1,1],
        "endColor":[1,1,1,0],
        "emitterType":"SphereShape",
        "emitterProps": [["radius","0.5"]],
        "lifeTime":[1], // 粒子生命周期为3秒
        "stopDuration":[2], // 子发射器生命周期为3秒
        "speed":"2",
        "texture":"flarePicture"
      }
      var subEmitter6 = tempSystem6.createSubEmitter(myData6)
      subEmitter6.state = 1 // 设置为1为当粒子消失后出现作用子发射器
      //可以规定多个子发射器的阵列
      tempSystem6.subEmitters = [subEmitter6]

      const fireworkField7 = xrScene.getElementById("firework7");
      const tempSystem7 = fireworkField7.getComponent('custom-particle')
      tempSystem7.addSizeGradient(0,0.2);
      tempSystem7.addSizeGradient(3,1);
      var myData7 ={}
      myData7 = {
        "capacity": 100,
        "emitRate": 0,  //子发射器不进行每秒发射
        "burstCount": 100, // 一次爆发200粒子
        "burstTime": 0.1, // 爆发延时为0
        "burstCycle": 1, // 发射一次
        "size":[0.05],
        "startColor":[1,1,0.5,1],
        "endColor":[1,1,1,0],
        "emitterType":"SphereShape",
        "emitterProps": [["radius","0.5"]],
        "lifeTime":[1], // 粒子生命周期为3秒
        "stopDuration":[2], // 子发射器生命周期为3秒
        "speed":"2",
        "texture":"flarePicture"
      }
      var subEmitter7 = tempSystem7.createSubEmitter(myData7)
      subEmitter7.state = 1 // 设置为1为当粒子消失后出现作用子发射器
      //可以规定多个子发射器的阵列
      tempSystem7.subEmitters = [subEmitter7]
    },
    handleAssetsProgress: function({detail}) {
      this.triggerEvent('assetsProgress', detail.value);
    },
    handleAssetsLoaded: function ({detail}) {
      console.log('assets loaded', detail.value);
      this.triggerEvent('assetsLoaded', detail.value);
      this.setData({
        loaded: true
      });
     
    },handleGltfLoaded2: function() {
      
    },handleGltfLoaded: function() {
      
    },
    handleTrackerSwitch: function ({detail}) {


      const active = detail.value;
      if(active)
      {
        this.setData({
          loaded2: true
        });
      }
    },handleARTrackerState({detail}) {
      // 事件的值即为`ARTracker`实例
      const tracker = detail.value;
      // 获取当前状态和错误信息
      const {state, errorMessage} = tracker;

      const element = detail.el;


      if( state==2)
      {

        this.triggerEvent('assetsstr',"state"  + state);
        
/*
        this.triggerEvent('assetsstr',"x:"  + (180/Math.PI* element.scene.getNodeById("Marker").rotation.x) +"\ny:"  +  (180/Math.PI*element.scene.getNodeById("Marker").rotation.y)+"\nz:"  +  (180/Math.PI*element.scene.getNodeById("Marker").rotation.z));*/
      
      }


    },
    handleAnimationStop: function() {
      console.log('animation Stop');
    },
   /* handleGLTFLoadedbingLong:function({detail}){
      const el2 = detail.value;
  
      
      var state = true;

      const xrScene = this.scene;
      const xrFrameSystem = wx.getXrFrameSystem();
      const myModel = xrScene.getElementById('binglong');
      this.myModelAnimator = myModel.getComponent(xrFrameSystem.Animator);
      const clips = this.myModelAnimator._clips;
      this.clipName = []
       clips.forEach((v, key) => {
        if (key.indexOf('pose') == -1) {
          this.clipName.push(key)
        }
      })
      wx.showToast({
        title: this.clipName[0],
      });
      this.myModelAnimator.play.play(this.clipName[0],{ loop:5,});

      var interval = setInterval(function() {
        if(false)
        {
          clearInterval(interval);
        }
        console.log(5000 +" 毫秒更新");
        if(state)
        {
          state = false;
          this.myModelAnimator.play.play(this.clipName[1],{ loop:5,});
        }else{
          state = true;
          this.myModelAnimator.play.play(this.clipName[2],{ loop:5,});
          el2.position =(0 -2.5 -40);
        }
        
       }, 5000)

    },*/
    capture() {
      this.scene.share.captureToFriends({
        fileType: this.data.captureType,
        quality: this.data.captureQuality
      });
    },
    recordStart() {
      console.log('recordStart') 
      wx.updateShareMenu({
        withShareTicket: true,
        success () { }
      })
      this.scene.share.recordStart({
        fps: 15,
        videoBitsPerSecond: 10000,
      });
    },
    recordEnd() {
      console.log('recordEnd')
     
      
      //
      const tempFilePath =  this.scene.share.recordFinishToAlbum({
        fps: 15,
        videoBitsPerSecond: 10000,
      });
      wx.shareVideoMessage({
        videoPath: tempFilePath,
      });
    },
    ShowModel(modelIndex){
      console.log(' ShowMoelIndex ',modelIndex);
      switch(modelIndex){
        case 1:
          this.setData({luanniaoShow:true});
        
          break;
        case 2:
          this.setData({yinglongShow:true});
          break;
        case 3:
          this.setData({fuzhuShow:true});
          break;
        case 4:
           this.setData({nianshouShow:true});
           break;
      }
     
    },
    CloseModel(){
      this.setData({longshow:false});
      this.setData({binglongshow:false});
      this.setData({lanjiachongshow:false});
    }
  }
})