隨著社會的不斷發(fā)現(xiàn)，現(xiàn)實生活中有很多時候會使用到全景現(xiàn)實，比如房地產行業(yè)vr看房，汽車行業(yè)vr看車之類的，全景可視化真實還原了現(xiàn)場的場景，真正做到沉浸式體驗。

現(xiàn)在我們基于vue3.0版本開發(fā)出了一款沉浸式的編輯器，只需要使用全景相機在現(xiàn)場拍攝全景場景，然后將場景倒入編輯器，通過拖動圖標和導航的方式綁定數(shù)據(jù)，從而實現(xiàn)沉浸式場景可視化。

部分潔面：

1、自定義動態(tài)添加數(shù)據(jù)綁定圖標，實時監(jiān)控數(shù)據(jù)運行狀態(tài)

2、自定義添加文字標記，綁定文字文本，標識場景設備名稱

?3、自定義添加場景標記，點擊可以切換不同場景視角

4、自定義添加地圖經緯度標記，查看當前標記位置

5、自定義添加音視頻標記，點擊查看音視頻播放

?6、自定義添加網(wǎng)址和富文本標記，點擊跳轉網(wǎng)址查看富文本內容?

?部分代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-612321.html

(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();

    // 當前月天數(shù)
    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('輸入數(shù)字');
      }
      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;

<template>
  <div class="edit-hot_wrapper">
    <el-dialog
      v-model="dialogVisible"
      :title="`${hotSpot.id ? '修改' : '新增'}${spotTypeName(form.iconType)}標記`"
      :width="'360px'"
      :top="'10px'"
      :modal="false"
      :close-on-click-modal="false"
      :custom-class="'edit-hot_dialog'"
      :before-close="close"
    >
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-form-item label="標記名稱" required prop="name">
          <el-input v-model="form.name" placeholder="輸入名稱" clearable/>
        </el-form-item>
        <!--基礎圖標綁定-->
        <template v-if="form.iconType == 1">
          <el-form-item label="綁定數(shù)據(jù)" required>
            <el-select
              v-model="form.devices"
              placeholder="選擇設備"
              filterable
              multiple
              collapse-tags
            >
              <el-option
                v-for="v in deviveData.data"
                :label="v.name"
                :value="v.id"
                :key="v.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="標記圖標" required prop="spotTypes">
            <el-image
              :class="['icon-types', form.spotTypes == v.id ? 'active' : '']"
              v-for="v in hotTypes"
              :key="v.id"
              :src="v.url"
              @click="form.spotTypes = v.id"
            />
          </el-form-item>
        </template>

        <!-- 文字圖標綁定-->
        <template v-if="form.iconType == 2">
          <el-form-item label="綁定數(shù)據(jù)" required prop="devices">
            <el-select
              v-model="form.devices"
              placeholder="選擇設備"
              filterable
              multiple
              collapse-tags
            >
              <el-option
                v-for="v in deviveData.data"
                :label="v.name"
                :value="v.id"
                :key="v.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文字內容" required prop="text">
            <el-input
              v-model="form.text"
              :rows="4"
              type="textarea"
              placeholder="輸入文字內容"
            />
          </el-form-item>
        </template>

        <!-- 場景圖標綁定-->
        <template v-if="form.iconType == 3">
          <el-form-item label="綁定場景" required prop="sceneId">
            <el-select
              v-model="form.sceneId"
              placeholder="選擇場景"
            >
              <el-option
                v-for="v in scenes"
                :label="v.name"
                :value="v.id"
                :key="v.id">
              </el-option>
            </el-select>
          </el-form-item>
        </template>

        <!-- 位置圖標綁定-->
        <template v-if="form.iconType == 4">
          <el-form-item label="地圖位置" required prop="localtion">
            <el-input v-model="form.localtion" placeholder="輸入經緯度" clearable/>
          </el-form-item>
          <el-form-item label="經緯度查詢">
            <el-button type="success">查詢</el-button>
          </el-form-item>
        </template>

        <!-- 位置圖標綁定-->
        <template v-if="form.iconType == 5">
          <el-form-item label="媒體地址" required prop="media">
            <el-input v-model="form.media.url" placeholder="輸入媒體地址" clearable/>
          </el-form-item>
          <el-form-item label="媒體類型" required>
            <el-radio-group v-model="form.media.type" class="ml-4">
              <el-radio :label="0" size="large">音頻</el-radio>
              <el-radio :label="1" size="large">視頻</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>

        <!-- 網(wǎng)址圖標綁定-->
        <template v-if="form.iconType == 6">
          <el-form-item label="網(wǎng)站地址" required prop="website">
            <el-input v-model="form.website" placeholder="輸入網(wǎng)址" clearable/>
          </el-form-item>
        </template>

        <!-- 網(wǎng)址圖標綁定-->
        <template v-if="form.iconType == 7">
          <el-form-item label="富文本" required prop="html">
            <el-input v-model="form.html" :rows="5" type="textarea" placeholder="輸入網(wǎng)址" clearable/>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="save(ruleForm)">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { res } from '../data/res.js';
// import store from '../../../store/index.js';
import { hotTypes } from '../utils/data.js';
import { defineEmits, defineProps } from 'vue';
import { reactive, ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import store from '../vuex/vrViewer.js';
import { ICOM_TYPE } from '../utils/data.js';

const ruleForm = ref(null);
const rules = reactive({
  name: [
    {
      required: true,
      trigger: 'change',
      message: '標記名稱必填'
    }
  ],
  devices: [
    {
      required: true,
      trigger: 'change',
      message: '綁定設備必填'
    }
  ],
  spotTypes: [
    {
      required: true,
      trigger: 'change',
      message: '標記圖標類型必填'
    }
  ],
  text: [
    {
      required: true,
      trigger: 'change',
      message: '文本內容必填'
    }
  ],
  sceneId: [
    {
      required: true,
      trigger: 'change',
      message: '綁定場景必填'
    }
  ],
  localtion: [
    {
      required: true,
      trigger: 'change',
      message: '綁定位置必填'
    }
  ],
  media: [
    {
      required: true,
      trigger: 'change',
      message: '媒體地址必填'
    }
  ],
  website: [
    {
      required: true,
      trigger: 'change',
      message: '網(wǎng)站地址必填'
    }
  ],
  html: [
    {
      required: true,
      trigger: 'change',
      message: '富文本內容必填'
    }
  ],
});
const dialogVisible = ref(true);
const deviveData = ref(res);
const props = defineProps({
  hotSpot: {}, // 當前標記
  scenes: {}
});

let stores = useStore();
// 當前標記類型id
const iconType = computed(() => {
  return stores.state.vrViewer.type;
});

// 當前標記類型名稱
const spotTypeName = () => {
  const list = Object.values(ICOM_TYPE);
  return list.find(v => v.type == form.value.iconType).name;
};

const types = ref(hotTypes);
const emits = defineEmits([
  'success',
  'close',
  'save'
]);

onMounted(() => {
  // 編輯回顯示
  if (props.hotSpot.id) {
    form.value = props.hotSpot.data;
    // store.commit('vrViewer/setIconType', props.hotSpot.data.iconType);
  }
});


const form = ref({
  id: '', // 標記id
  name: '',
  devices: [],
  spotTypes: types.value[0].id, // 圖標類型
  spotUrl: types.value[0].url, // 標記圖表url
  iconType: stores.state.vrViewer.type,
  text: '', // 文字綁定
  sceneId: '', // 場景綁定
  localtion: '', // 位置經緯度綁定
  media: {
    type: 0, // 0代表音頻， 1代表視頻
    url: '' // url播放地址
  },
  website: '', // 網(wǎng)址
  html: '', // html綁定
});

const close = () => emits('close');

const save = async (formEl) => {
  // if (!form.value.name) {
  //   // 其他類型報錯
  //   ElMessage({
  //     showClose: true,
  //     message: '輸入名稱',
  //     type: 'error'
  //   });
  //   return;
  // }

  // if (!form.value.devices.length) {
  //   // 其他類型報錯
  //   ElMessage({
  //     showClose: true,
  //     message: '選擇設備',
  //     type: 'error'
  //   });
  //   return;
  // }
  console.log(formEl, 'formEl');
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits('save', form.value, props.hotSpot);
      close();
    } else {
      console.log('error submit!', fields)
    }
  })
};

const success = () => {
  emits('success');
};
</script>
<style lang="scss">
  .edit-hot_dialog {
    .el-dialog__body {
      padding: 10px 20px;
      .el-select {
        width: 245px;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .icon-types {
    width: 36px;
    height: 35px;
    margin: 2px;
    border: 1px solid #ccc;
    user-select: none;
    &.active {
      border: 2px solid blue;
    }
  }
</style>

到了這里，關于基于vue3.0實現(xiàn)vr全景編輯器的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！