D-MAP/src/uwb-sample.js

//import { FBXLoader } from "./FBXLoader.js";
//import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
//import { MeshBasicMaterial, MeshStandardMaterial, Vector3 } from "three";
import Vue from "vue";
import fetchAndCombine from "../public/loader/loader";
import { UWB } from "../public/plugin/uwb/index.js";
import { FXAAShader } from "../public/shader/FAAXShader.js"
import '../public/libs/tools.js'

// 定义一个函数，接受元素ID和一个回调函数作为参数，用于处理点击事件
window.waterMap = {}

function getsqlData(sdkInstance, uwbInstance) {
  let g_PosArrayResult = null;

  let textureLoader = new THREE.TextureLoader();
  let textureReady = textureLoader.load('../images/location_ready.png');
  let textureRunning = textureLoader.load('../images/location_running.png');
  let textureOffline = textureLoader.load('../images/location_offline.png');

  if (g_PosArrayResult == null) {
    var sqlstr = "SELECT * FROM dat_bench_extend order by bench_id asc";

    //sqlstr = sqlstr.format(two_seconds_ago, two_seconds_ago)
    console.log(sqlstr);
    let msg = {
      cmd: "query", // server端要进行判断的
      data: {
        name: "name", // 这个无所谓怎么写，有就行
        //sql: 'select * from his_location_tadiao_result_unity limit 300'
        sql: sqlstr,
      },
    };
    // 触发事件进行从服务器获取数据
    window.vm.$socket.emit("REPT", msg, (datas) => {
      g_PosArrayResult = datas.data;
      var now = new Date();
      var two_seconds_ago = new Date(now.getTime() - 2 * 1000).Format(
        "yyyy-MM-dd hh:mm:ss.S"
      );
      var one_second_ago = new Date(now.getTime() - 1 * 1000).Format(
        "yyyy-MM-dd hh:mm:ss.S"
      );

      {
        let result = g_PosArrayResult;
        for (var item of result) {
          let x = item.x;
          let y = item.y;
          let z = item.z;
          let ang_x = 0.0;
          let ang_y = 0.0;
          let ang_z = 0.0;
          let benchType = item.bench_type
          if (item.use_fix_pos == 1) {
            x = JSON.parse(JSON.stringify(item.fix_pos_x));
            y = JSON.parse(JSON.stringify(item.fix_pos_y));
            z = JSON.parse(JSON.stringify(item.fix_pos_z));
            ang_x = JSON.parse(JSON.stringify(item.fix_angle_x));
            ang_y = JSON.parse(JSON.stringify(item.fix_angle_y));
            ang_z = JSON.parse(JSON.stringify(item.fix_angle_z));
          }
          else {
          }

          var distance = 10000.0;

          var xSubTmp = x;
          var ySubTmp = y;
          var zSubTmp = z;
          var ang_xSubTmp = ang_x;
          var ang_ySubTmp = ang_y;
          var ang_zSubTmp = ang_z;

          if (g_PosArrayResult) {
            var iCount = 0;
            for (var itemSub of g_PosArrayResult) {

              iCount++;
              var xSub = itemSub.x;
              var ySub = itemSub.y;
              var zSub = itemSub.z;
              var ang_xSub = 0.0;
              var ang_ySub = 0.0;
              var ang_zSub = 0.0;
              xSub = itemSub.fix_pos_x;
              ySub = itemSub.fix_pos_y;
              zSub = itemSub.fix_pos_z;
              ang_xSub = itemSub.fix_angle_x;
              ang_ySub = itemSub.fix_angle_y;
              ang_zSub = itemSub.fix_angle_z;
              var disTmp = Math.sqrt(Math.pow(x - xSub, 2) + Math.pow(y - ySub, 2) + Math.pow(z - zSub, 2))
              if (disTmp < distance) {
                distance = disTmp;
                xSubTmp = xSub;
                ySubTmp = ySub;
                zSubTmp = zSub;
                ang_xSubTmp = ang_xSub;
                ang_ySubTmp = ang_ySub;
                ang_zSubTmp = ang_zSub;
              }
            }
          }


          x = xSubTmp;
          y = ySubTmp;
          z = zSubTmp;
          ang_x = ang_xSubTmp;
          ang_y = ang_ySubTmp;
          ang_z = ang_zSubTmp;
          x = JSON.parse(JSON.stringify(xSubTmp));
          y = JSON.parse(JSON.stringify(ySubTmp));
          z = JSON.parse(JSON.stringify(zSubTmp));
          ang_x = JSON.parse(JSON.stringify(ang_xSubTmp));
          ang_y = JSON.parse(JSON.stringify(ang_ySubTmp));
          ang_z = JSON.parse(JSON.stringify(ang_zSubTmp));

          let card_id = item.card_id;
          let bench_id = item.bench_id;
          let show_remote_button = item.show_remote_button;
          // 添加水滴
          let benchList = window.store ? window.store.getters['benchList/getBenchList'] : [];
          let currentBench = benchList.find(b => b.id == bench_id);
          let texture = null;
          if (currentBench) {
            switch(currentBench.status) {
              case "ready":
                texture = textureReady;
                break;
              case "running":
                texture = textureRunning;
                break;
              case "offline":
                texture = textureOffline;
                break;
              default:
                texture = textureOffline;
                break;
            }
          } else {
            texture = textureOffline;
          }
          

          // 创建精灵对象
          let spriteMaterial = new THREE.SpriteMaterial({
            map: texture
          });
          let sprite = new THREE.Sprite(spriteMaterial);
          sprite.userData = {};
          // sprite.scale.set(100, 100, 1);
          sprite.position.set(x, y + 10, z);
          window.waterMap[bench_id] = sprite;
          console.log('添加模型和水滴1111')
          sdkInstance.sceneRenderer.scene.add(sprite)
        };
      }

      let dracoLoader = new THREE.DRACOLoader();
      THREE.DRACOLoader.setDecoderPath("../gltf/");

      var fbxLoader1 = new THREE.GLTFLoader();
      fbxLoader1.setDRACOLoader(dracoLoader);
      fbxLoader1.load("../models/meshDraco.gltf", function (fbx) {

        let result = g_PosArrayResult;
        for (var item of result) {
          let x = item.x;
          let y = item.y;
          let z = item.z;
          let ang_x = 0.0;
          let ang_y = 0.0;
          let ang_z = 0.0;
          let benchType = item.bench_type
          if (item.use_fix_pos == 1) {
            x = JSON.parse(JSON.stringify(item.fix_pos_x));
            y = JSON.parse(JSON.stringify(item.fix_pos_y));
            z = JSON.parse(JSON.stringify(item.fix_pos_z));
            ang_x = JSON.parse(JSON.stringify(item.fix_angle_x));
            ang_y = JSON.parse(JSON.stringify(item.fix_angle_y));
            ang_z = JSON.parse(JSON.stringify(item.fix_angle_z));
          }
          else {
          }

          var distance = 10000.0;

          var xSubTmp = x;
          var ySubTmp = y;
          var zSubTmp = z;
          var ang_xSubTmp = ang_x;
          var ang_ySubTmp = ang_y;
          var ang_zSubTmp = ang_z;

          if (g_PosArrayResult) {
            var iCount = 0;
            for (var itemSub of g_PosArrayResult) {

              iCount++;
              var xSub = itemSub.x;
              var ySub = itemSub.y;
              var zSub = itemSub.z;
              var ang_xSub = 0.0;
              var ang_ySub = 0.0;
              var ang_zSub = 0.0;
              xSub = itemSub.fix_pos_x;
              ySub = itemSub.fix_pos_y;
              zSub = itemSub.fix_pos_z;
              ang_xSub = itemSub.fix_angle_x;
              ang_ySub = itemSub.fix_angle_y;
              ang_zSub = itemSub.fix_angle_z;
              var disTmp = Math.sqrt(Math.pow(x - xSub, 2) + Math.pow(y - ySub, 2) + Math.pow(z - zSub, 2))
              if (disTmp < distance) {
                distance = disTmp;
                xSubTmp = xSub;
                ySubTmp = ySub;
                zSubTmp = zSub;
                ang_xSubTmp = ang_xSub;
                ang_ySubTmp = ang_ySub;
                ang_zSubTmp = ang_zSub;
              }
            }
          }


          x = xSubTmp;
          y = ySubTmp;
          z = zSubTmp;
          ang_x = ang_xSubTmp;
          ang_y = ang_ySubTmp;
          ang_z = ang_zSubTmp;
          x = JSON.parse(JSON.stringify(xSubTmp));
          y = JSON.parse(JSON.stringify(ySubTmp));
          z = JSON.parse(JSON.stringify(zSubTmp));
          ang_x = JSON.parse(JSON.stringify(ang_xSubTmp));
          ang_y = JSON.parse(JSON.stringify(ang_ySubTmp));
          ang_z = JSON.parse(JSON.stringify(ang_zSubTmp));

          let card_id = item.card_id;
          let bench_id = item.bench_id;
          let show_remote_button = item.show_remote_button;
          if (benchType == 1) {
            console.log("控制台查看加载gltf文件返回的对象结构", fbx);
            var childMesh = childMesh = fbx.scene.children[0].children[0];
            let childMeshTmp = new THREE.Mesh(childMesh.geometry, childMesh.material)
            let scale = 5;
            childMeshTmp.scale.set(scale, scale, scale)
            //fbx.scene.children[0].scale.set(5, 5, 5)
            //fbx.scene.children[0].position.set(8.7, -1.6, 5.4)
            childMeshTmp.position.set(x, y, z)
            var Euler = new THREE.Euler(Math.PI * ang_x, Math.PI * ang_y, Math.PI * ang_z);
            //var Euler = new THREE.Euler( Math.PI*1.5, Math.PI*0, Math.PI*0);
            var quaternion = new THREE.Quaternion();
            childMeshTmp.quaternion.copy(quaternion.setFromEuler(Euler))
            var customData = {
              benchId: bench_id,
              benchFlag: true,
              bShowRemoteButton: show_remote_button == 1 ? true : false,
            };
            childMeshTmp.userData = customData;

            console.log('添加模型和水滴1111')
            sdkInstance.sceneRenderer.scene.add(childMeshTmp)
          }

        };
      })

      var fbxLoader2 = new THREE.GLTFLoader();
      fbxLoader2.setDRACOLoader(dracoLoader);
      fbxLoader2.load("../models/mesh2Draco.gltf", function (fbx) {

        let result = g_PosArrayResult;
        for (var item of result) {
          let x = item.x;
          let y = item.y;
          let z = item.z;
          let ang_x = 0.0;
          let ang_y = 0.0;
          let ang_z = 0.0;
          let benchType = item.bench_type
          if (item.use_fix_pos == 1) {
            x = JSON.parse(JSON.stringify(item.fix_pos_x));
            y = JSON.parse(JSON.stringify(item.fix_pos_y));
            z = JSON.parse(JSON.stringify(item.fix_pos_z));
            ang_x = JSON.parse(JSON.stringify(item.fix_angle_x));
            ang_y = JSON.parse(JSON.stringify(item.fix_angle_y));
            ang_z = JSON.parse(JSON.stringify(item.fix_angle_z));
          }
          else {
          }

          var distance = 10000.0;

          var xSubTmp = x;
          var ySubTmp = y;
          var zSubTmp = z;
          var ang_xSubTmp = ang_x;
          var ang_ySubTmp = ang_y;
          var ang_zSubTmp = ang_z;

          if (g_PosArrayResult) {
            var iCount = 0;
            for (var itemSub of g_PosArrayResult) {

              iCount++;
              var xSub = itemSub.x;
              var ySub = itemSub.y;
              var zSub = itemSub.z;
              var ang_xSub = 0.0;
              var ang_ySub = 0.0;
              var ang_zSub = 0.0;
              xSub = itemSub.fix_pos_x;
              ySub = itemSub.fix_pos_y;
              zSub = itemSub.fix_pos_z;
              ang_xSub = itemSub.fix_angle_x;
              ang_ySub = itemSub.fix_angle_y;
              ang_zSub = itemSub.fix_angle_z;
              var disTmp = Math.sqrt(Math.pow(x - xSub, 2) + Math.pow(y - ySub, 2) + Math.pow(z - zSub, 2))
              if (disTmp < distance) {
                distance = disTmp;
                xSubTmp = xSub;
                ySubTmp = ySub;
                zSubTmp = zSub;
                ang_xSubTmp = ang_xSub;
                ang_ySubTmp = ang_ySub;
                ang_zSubTmp = ang_zSub;
              }
            }
          }


          x = xSubTmp;
          y = ySubTmp;
          z = zSubTmp;
          ang_x = ang_xSubTmp;
          ang_y = ang_ySubTmp;
          ang_z = ang_zSubTmp;
          x = JSON.parse(JSON.stringify(xSubTmp));
          y = JSON.parse(JSON.stringify(ySubTmp));
          z = JSON.parse(JSON.stringify(zSubTmp));
          ang_x = JSON.parse(JSON.stringify(ang_xSubTmp));
          ang_y = JSON.parse(JSON.stringify(ang_ySubTmp));
          ang_z = JSON.parse(JSON.stringify(ang_zSubTmp));

          let card_id = item.card_id;
          let bench_id = item.bench_id;

          if (benchType == 2) {
            console.log("控制台查看加载gltf文件返回的对象结构", fbx);
            var childMesh = fbx.scene.children[0];
            let childMeshTmp = new THREE.Mesh(childMesh.geometry, childMesh.material)
            let scale = 0.05;
            childMeshTmp.scale.set(scale, scale, scale)
            //fbx.scene.children[0].scale.set(5, 5, 5)
            //fbx.scene.children[0].position.set(8.7, -1.6, 5.4)
            childMeshTmp.position.set(x, y, z)
            var Euler = new THREE.Euler(Math.PI * ang_x, Math.PI * ang_y, Math.PI * ang_z);
            //var Euler = new THREE.Euler( Math.PI*1.5, Math.PI*0, Math.PI*0);
            var quaternion = new THREE.Quaternion();
            childMeshTmp.quaternion.copy(quaternion.setFromEuler(Euler))
            var customData = {
              benchId: bench_id,
              benchFlag: true,
            };
            childMeshTmp.userData = customData;
            sdkInstance.sceneRenderer.scene.add(childMeshTmp)
          }
        };
        if (!sessionStorage.getItem('3dMode') || sessionStorage.getItem('3dMode') == 0) {
          setTimeout(() => {
            var benchPosList = [];
            for (var item of result) {
              var localPosition = new THREE.Vector3(item.fix_pos_x, item.fix_pos_y, item.fix_pos_z);
              var worldPosition = uwbInstance.convertLocalToWorld(localPosition);
              var pos = sdkInstance.getScreenPosition(worldPosition);
              benchPosList.push(
                {
                  x: pos.x,
                  y: pos.y,
                  benchType: item.bench_type,
                  benchId: item.bench_id
                }
              )
            }
            window.showBenchPos(benchPosList);
          }, 2000
          )
        }


      })


    });
  }

}
// uwb 插件初始化
function uwbInit(originPointPose) {
  console.log("=====初始化uwb 实例=====");
  const uwbIns = new UWB({
    upAxis: "y-up",
    LR: "r",
    worldPose: originPointPose,
  });
  return uwbIns;
}

export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
  console.log("uwbMain enter");
  finalMode = finalMode || "floorplan";
  var radius = 0.3;
  var height = 0.5;
  var segments = 4;
  var color = 0x00ff00;
  let g_gltf_downloaded = false;
  let composer = null;
  let box = null;
  let sqlQueryInited = false;
  let g_fbx = null;
  let g_fbxLoader = null;
  let sdkInstance = null;
  window.renderHeight = modelHeight;
  window.renderWidth = modelWidth;
  var geometry = new THREE.ConeGeometry(radius, height, segments);
  var material1 = new THREE.MeshBasicMaterial({
    color: color,
    opacity: 0.2,
    transparent: true,
  });

  fetchAndCombine().then(([err, data]) => {
    if (err) {
      console.error(err);
      console.log("模型加载出错");
    } else {
      let HousePlay = HOUSEPLAY.HousePlay;
      let playerContainer = document.getElementById(domId)
      data.container = playerContainer;
      sdkInstance = new HousePlay(data);
      window.sdkInstance = sdkInstance;
      sdkInstance.start();
      let vrBgContainer = document.getElementById("vr-bg-container");
      vrBgContainer.style.width = modelWidth + 'px'
      vrBgContainer.style.height = modelHeight + 'px'
      vrBgContainer.style.backgroundColor = 'transparent'

      // sdkInstance.player.mode = finalMode;
      setTimeout(() => {
        window.sdkInstance.emit("endLoading", finalMode);
        window.sdkInstance.emit("modeChange", null, finalMode);
        if (!sessionStorage.getItem('3dMode') || sessionStorage.getItem('3dMode') == 0) {
          window.sdkInstance.changeMode(finalMode);
          setTimeout(() => {
            var container = document.getElementById("ordinary-map")
            container.style.opacity = 1;
          }, 500)
        }

      }, 3000)
      sdkInstance.on("endLoading", (mode) => {
        console.log(mode, '-----+++++-----')
        vrBgContainer.style.display = "none";

        // 本地坐标系原点位姿
        const originPointPose = {
          worldPosition: { x: 0, y: 0, z: 0 },
          worldQuaternion: {
            x: 0,
            y: 0,
            z: 0,
            w: 1,
          },
        };

        //初始化uwb插件
        let uwbInstance = uwbInit(originPointPose);


        if (g_gltf_downloaded == false) {
          let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
          sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
          let pointLight = new THREE.PointLight(0xffffff, 1, 0);
          pointLight.position.set(200, 200, 200); //设置点光源位置
          sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
          g_gltf_downloaded = true;
          getsqlData(sdkInstance, uwbInstance);
        }
        let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
        sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
        let pointLight = new THREE.PointLight(0xffffff, 1, 0);
        pointLight.position.set(200, 200, 200); //设置点光源位置
        sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
        setTimeout(
          function () {
            getsqlData(sdkInstance, uwbInstance)
          },
          100
        );

        if (g_fbxLoader == null) {
          g_fbxLoader = new THREE.GLTFLoader();
          g_fbxLoader.load("../models/mesh2.gltf", function (fbx) {
            let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
            sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
            let pointLight = new THREE.PointLight(0xffffff, 1, 0);
            pointLight.position.set(200, 200, 200); //设置点光源位置
            sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
            g_fbx = fbx;
            console.log("控制台查看加载gltf文件返回的对象结构", fbx);
            //fbx.scene.children[0].children[0].scale.set(5, 5, 5)
            //window.shader = new THREE.MeshStandardMaterial(fbx.scene.children[0].children[0].material);
            //window.shader1 = new THREE.MeshStandardMaterial(fbx.scene.children[0].children[0].material);
            setTimeout(
              function () {
                getsqlData(sdkInstance, uwbInstance)
              },
              100
            );
          });
          if (false) {
            sqlQueryInited = true;
            var index = 0;
            setTimeout(
              function (card_id, x, y, z) {
                var timerId = setInterval(function () {
                  //console.log(++index + "秒钟到了");
                  getsqlData(sdkInstance, uwbInstance)
                }, 1000);
              },
              500
            );
          }
        }


        // 创建物体add
        // 模型加载完成，进入模型页面，添加摆放的物体
        let canvas = document.getElementsByTagName('canvas')[0]

        canvas.style.borderRadius = "0px"
        canvas.onmousedown = (event) => {

          let mouse = new THREE.Vector2();
          let raycaster = new THREE.Raycaster();
          mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
          mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;


          raycaster.setFromCamera(mouse, sdkInstance.player.camera);
          let intersects = raycaster.intersectObjects(sdkInstance.sceneRenderer.scene.children);

          if (intersects && intersects.length > 0) {
            let bFirst = true;
            let bool = false;
            let bool1 = false;
            // intersects.forEach(m => {
            //   if (m.object.geometry.type != "PlaneBufferGeometry") {
            //     if (m.object.userData && m.object.userData.benchFlag == true) {
            //       if (!bool) {
            //         bool = true;
            //         //m.object.material = window.shader1;
            //         ////m.object.scale.set(10, 10, 10)
            //         //m.object.scale.set(5, 5, 5)
            //         //outlineObj(m.object)
            //         // let player = document.getElementById(domId)
            //         // player.style.display = "none"

            //         if (box) {
            //           sdkInstance.sceneRenderer.scene.remove(box);
            //         }
            //         window.handleBenchClick(m.object.userData.benchId, m.object.userData.bShowRemoteButton)

            //         box = new THREE.BoxHelper(m.object, '#ff0000');  //object 模型
            //         sdkInstance.sceneRenderer.scene.add(box);

            //         //let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
            //         //sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
            //         //let pointLight = new THREE.PointLight(0xffffff, 1, 0);
            //         //pointLight.position.set(200, 200, 200); //设置点光源位置
            //         //sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
            //       }
            //       //outlineObj(m.object)

            //       //m.object.material = FXAAShader
            //     }

            //   } else if (m.object.geometry.type == "PlaneBufferGeometry") {
            //     if (m.object.userData && m.object.userData.benchFlag == true) {
            //       window.handleListClick(m.object.userData.benchId)
            //     }
            //   }
            // })
            bool = false;
            bool1 = false;
          }
        }
        canvas.onmouseover = (event) => {

          let mouse = new THREE.Vector2();
          let raycaster = new THREE.Raycaster();
          mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
          mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;


          raycaster.setFromCamera(mouse, sdkInstance.player.camera);
          let intersects = raycaster.intersectObjects(sdkInstance.sceneRenderer.scene.children);

          if (intersects && intersects.length > 0) {
            let bFirst = true;
            let bool = false;
            let bool1 = false;
            intersects.forEach(m => {
              if (m.object.geometry.type == "PlaneBufferGeometry") {
                if (m.object.userData.benchFlag == true) {
                  console.log('===== bench selected =====')
                  // window.handleListClick(m.object.userData.benchId)
                }
              }
            })
            bool = false;
            bool1 = false;
          }
        }
        return;

        let outlinePass = null;

        function outlineObj(selectedObjects) {

          composer = new THREE.EffectComposer(sdkInstance.sceneRenderer.renderer); // 特效组件

          var renderPass = new THREE.RenderPass(sdkInstance.sceneRenderer.scene, sdkInstance.player.camera);
          composer.addPass(renderPass); // 特效渲染

          outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), sdkInstance.sceneRenderer.scene, sdkInstance.player.camera);
          composer.addPass(outlinePass); // 加入高光特效

          outlinePass.pulsePeriod = 2; //数值越大，律动越慢
          outlinePass.visibleEdgeColor.set(0xff0000); // 高光颜色
          outlinePass.hiddenEdgeColor.set(0x000000);// 阴影颜色
          outlinePass.usePatternTexture = true; // 使用纹理覆盖？
          outlinePass.edgeStrength = 5; // 高光边缘强度
          outlinePass.edgeGlow = 1; // 边缘微光强度
          outlinePass.edgeThickness = 1; // 高光厚度

          var textureLoader = new THREE.TextureLoader();
          textureLoader.load('../models/matcap.png', function (texture) {

            outlinePass.patternTexture = texture;
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;


            outlinePass.selectedObjects = selectedObjects; // 需要高光的obj
            if (composer != null) {
              animate();
            }
          })

        }


        function animate() {
          requestAnimationFrame(animate);
          if (composer != null) {
            composer.render();
          }
        }

      });
    }
    sdkInstance.on("modeChange", function (currentMode, newMode) {
      if (newMode === "transitioning") {
        return;
      }
      console.log(newMode, '@@@@@@@@@@@@@')
    });
  });
}