基于vue3.0实现vr全景编辑器

随着社会的不断发现，现实生活中有很多时候会使用到全景现实，比如房地产行业vr看房，汽车行业vr看车之类的，全景可视化真实还原了现场的场景，真正做到沉浸式体验。

现在我们基于vue3.0版本开发出了一款沉浸式的编辑器，只需要使用全景相机在现场拍摄全景场景，然后将场景倒入编辑器，通过拖动图标和导航的方式绑定数据，从而实现沉浸式场景可视化。

部分洁面：

1、自定义动态添加数据绑定图标，实时监控数据运行状态

2、自定义添加文字标记，绑定文字文本，标识场景设备名称

 3、自定义添加场景标记，点击可以切换不同场景视角

4、自定义添加地图经纬度标记，查看当前标记位置

5、自定义添加音视频标记，点击查看音视频播放

 6、自定义添加网址和富文本标记，点击跳转网址查看富文本内容 

 部分代码如下：

(function (w) { // isFormat 表示是否格式化时间格式，，默认为格式化
  function $Date (isFormat = true) { // 格式化日期 前台传值方式  引用类.dateFormat(1402233166999,"yyyy-MM-dd hh:mm:ss")
    this.dateFormat = function (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
      let getDate = new Date(date);
      let o = {
        'M+': getDate.getMonth() + 1,
        'd+': getDate.getDate(),
        'h+': getDate.getHours(),
        'm+': getDate.getMinutes(),
        's+': getDate.getSeconds(),
        'q+': Math.floor(
          (getDate.getMonth() + 3) / 3
        ),
        'S': getDate.getMilliseconds()
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
        }
      }
      return fmt;
    };
    // 当前日期时间
    this.now = isFormat ? this.dateFormat(new Date()) : new Date();

    // 当前日期
    this.date = this.dateFormat(new Date()).split(' ')[0];

    // 当前时间
    this.time = this.dateFormat(new Date()).split(' ')[1];

    // 当前月
    this.month = new Date().getMonth() + 1;

    // 当前消失
    this.hours = new Date().getHours();

    // 当前月天数
    this.monthDays = (() => {
      let nowMonth = new Date().getMonth(); // 当前月
      let nowYear = new Date().getYear(); // 当前年
      let monthStartDate = new Date(nowYear, nowMonth, 1);
      let monthEndDate = new Date(nowYear, nowMonth + 1, 1);
      let days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
      return days;
    })();

    // 本周的开始日期和结束日日期
    this.endDayOfWeek = (() => {
      let nowMonth = new Date().getMonth(); // 当前月
      let nowDay = new Date().getDate(); // 当前日
      let nowDayOfWeek = new Date().getDay(); // 今天本周的第几天
      let day = nowDayOfWeek || 7;

      const start = new Date(new Date().getFullYear(), nowMonth, nowDay - day + 1);
      const starts = new Date(new Date().getFullYear(), nowMonth, nowDay - day + 1);
      const end = new Date(new Date().getFullYear(), nowMonth, nowDay + 7 - day);
      const ends = new Date(new Date().getFullYear(), nowMonth, nowDay + 7 - day);

      starts.setHours(23);
      starts.setMinutes(59);
      starts.setSeconds(59);

      ends.setHours(23);
      ends.setMinutes(59);
      ends.setSeconds(59);

      const firstDay = isFormat ? this.dateFormat(start) : start;
      const firstDays = isFormat ? this.dateFormat(starts) : starts;
      const lastDay = isFormat ? this.dateFormat(end) : end;
      const lastDays = isFormat ? this.dateFormat(ends) : ends;
      return {firstDay, firstDays, lastDay, lastDays};
    })();

    // 当天开始时间
    this.todayBegin = (() => {
      const now = new Date();
      now.setHours(0);
      now.setMinutes(0);
      now.setSeconds(0);
      return isFormat ? this.dateFormat(now) : now;
    })();

    // 当天59时59分59秒
    this.todayEnd = (() => {
      const now = new Date();
      now.setHours(23);
      now.setMinutes(59);
      now.setSeconds(59);
      return isFormat ? this.dateFormat(now) : now;
    })();

    // 指定月的最后第一天和最后一天
    this.getNowTheMothEnd = (M) => {
      if (typeof M !== 'number') {
        throw new Error('输入数字');
      }
      if (M < 0 || M > 12) {
        console.error('日期大于1小于12');
        return false;
      }

      const now = new Date();
      let y = now.getFullYear();
      let m = M - 1;

      const firstDay = new Date(y, m, 1);
      const firstDays = new Date(y, m, 1);
      firstDays.setHours(23);
      firstDays.setMinutes(59);
      firstDays.setSeconds(59);

      const lastDay = new Date(y, m + 1, 0);
      const lastDays = new Date(y, m + 1, 0);
      lastDays.setHours(23);
      lastDays.setMinutes(59);
      lastDays.setSeconds(59);

      return {
        firstDay: isFormat ? this.dateFormat(firstDay) : firstDay,
        firstDays: isFormat ? this.dateFormat(firstDays) : firstDays,
        lastDay: isFormat ? this.dateFormat(lastDay) : lastDay,
        lastDays: isFormat ? this.dateFormat(lastDays) : lastDays
      };
    };

    // 当月的最后第一天和最后一天
    this.nowMothEnd = (() => {
      const now = new Date();
      let y = now.getFullYear();
      let m = now.getMonth();

      const firstDay = new Date(y, m, 1);
      const firstDays = new Date(y, m, 1);
      firstDays.setHours(23);
      firstDays.setMinutes(59);
      firstDays.setSeconds(59);

      const lastDay = new Date(y, m + 1, 0);
      const lastDays = new Date(y, m + 1, 0);
      lastDays.setHours(23);
      lastDays.setMinutes(59);
      lastDays.setSeconds(59);

      return {
        firstDay: isFormat ? this.dateFormat(firstDay) : firstDay,
        firstDays: isFormat ? this.dateFormat(firstDays) : firstDays,
        lastDay: isFormat ? this.dateFormat(lastDay) : lastDay,
        lastDays: isFormat ? this.dateFormat(lastDays) : lastDays
      };
    })();

    // 今年的第一天和今年的最后一天
    this.nowYearsEnd = (() => {
      const now = new Date();
      let y = now.getFullYear();
      let m = now.getMonth();
      console.log(m);

      const firstDay = new Date(y, 0, 1);
      const firstDays = new Date(y, 0, 1);
      firstDays.setHours(23);
      firstDays.setMinutes(59);
      firstDays.setSeconds(59);

      const lastDay = new Date(y, 12, 0);
      const lastDays = new Date(y, 12, 0);
      lastDays.setHours(23);
      lastDays.setMinutes(59);
      lastDays.setSeconds(59);
      return {
        firstDay: isFormat ? this.dateFormat(firstDay) : firstDay,
        firstDays: isFormat ? this.dateFormat(firstDays) : firstDays,
        lastDay: isFormat ? this.dateFormat(lastDay) : lastDay,
        lastDays: isFormat ? this.dateFormat(lastDays) : lastDays
      };
    })();

    // 指定年的第一天和今年的最后一天
    this.nowTheYearsEnd = (Y) => {
      const now = new Date();
      let y = Y;
      let m = now.getMonth();
      console.log(m);

      const firstDay = new Date(y, 0, 1);
      const firstDays = new Date(y, 0, 1);
      firstDays.setHours(23);
      firstDays.setMinutes(59);
      firstDays.setSeconds(59);

      const lastDay = new Date(y, 12, 0);
      const lastDays = new Date(y, 12, 0);
      lastDays.setHours(23);
      lastDays.setMinutes(59);
      lastDays.setSeconds(59);
      return {
        firstDay: isFormat ? this.dateFormat(firstDay) : firstDay,
        firstDays: isFormat ? this.dateFormat(firstDays) : firstDays,
        lastDay: isFormat ? this.dateFormat(lastDay) : lastDay,
        lastDays: isFormat ? this.dateFormat(lastDays) : lastDays
      };
    };

    // 当前时间最近前N天
    this.getNowBeforeNday = (N) => {
      const now = new Date().getTime();
      const before = new Date().getTime() - (24 * 60 * 60 * 1000) * N;
      return {
        now: isFormat ? this.dateFormat(new Date(now)) : new Date(now),
        before: isFormat ? this.dateFormat(new Date(before)) : new Date(before)
      };
    };

    // 当前时间后面N天
    this.getNowAfterNday = (N) => {
      const now = new Date().getTime();
      const after = new Date().getTime() + (24 * 60 * 60 * 1000) * N;
      return {
        now: isFormat ? this.dateFormat(new Date(now)) : new Date(now),
        after: isFormat ? this.dateFormat(new Date(after)) : new Date(after)
      };
    };
  }
  w.$Date = $Date;
})(window);
const date = window.$Date;
export const $Date = date;