越寫悅快樂之Vue項目如何集成Panolens.js

今天的越寫悅快樂之系列文章爲大家帶來ue項目如何集成Panolens.js的文章。作爲一名追求的碼農來說，研究新技術並且應用到產品中，是我們不懈的追求，大家有沒有實踐過使用Panolens.js來構建我們的全景地圖瀏覽頁面呢？今天我爲大家分享一下如何在Vue項目中集成Panolens.js。

Panolens.js是一款基於事件驅動和WebGL的輕量和可擴展的全景視圖組件，它基於three.js 構建，想了解相關內容，請參考GitHub

開發環境

• Window 10.0.17763
• Node 10.18.0
• Visual Studio Code 1.48.2
• Vue 2.6.12
• Vue CLI 4.5.9

接入步驟

創建項目

我們可以通過兩種方式來創建項目：

1）命令行

• vue create panolens-vue(選擇默認配置)

2）Vue UI

在命令行或者終端輸入vue ui即可打開默認瀏覽器，然後選擇項目存放位置、輸入項目信息、包管理方式等信息，最後點擊創建工程。

安裝Panolens依賴

我們在終端下執行以下命令：

yarn add vuejs-vr -S

vuejs-vr是Panolens.js的Vue封裝

項目配置文件

上一步我們安裝了vuejs-vr依賴，下面我們可以看一下具體的package.json配置文件，文件的內容如下：

{
  "name": "panolens-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.12",
    "vuejs-vr": "^1.2.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.12"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

創建格式化配置文件

爲了規範編寫的代碼，我們使用Prettier來格式化代碼，此時我們在項目根目錄下創建.prettierrc.js文件，並寫入以下內容：

module.exports = {
  semi: false,
  singleQuote: true
}

然後我們就可以在VSCode的終端中輸入yarn lint命令來格式化代碼，隨後我們在項目根目錄下創建.vscode目錄，並寫入配置文件setting.json,文件內容如下：

{
  "editor.tabSize": 2,
  "editor.formatOnSave": false,
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

編寫渲染組件

我們在項目的入口組件App.vue文件中引入vuejs-vr並在模板template標籤中寫入組件，其文件內容如下：

<template>
  <div id="app">
    <Pano
      :source="
        'https://raw.githubusercontent.com/mudin/vue-vr/master/demos/assets/equirectangular.jpg'
      "
      style="height: 740px"
    ></Pano>
  </div>
</template>

<script>
import { Pano } from 'vuejs-vr'

export default {
  name: 'App',
  components: {
    Pano
  }
}
</script>

<style>
body {
  margin: 0 auto;
}
</style>

項目結構

當我們完成代碼的編寫後，可以看到項目的結構如下圖所示：

查看結果

我們在項目所在的控制檯（或者終端）執行yarn dev命令，然後通過Router跳轉到about頁面即可看到表單，點擊創建按鈕。

參考

• Panolens.js
• Vue VR

個人收穫及總結

本文介紹瞭如何在Vue項目中集成Panolens，也就是利用Three.js構建全景的瀏覽頁面，將圖片或者視頻資源綁定後，就可以查看全景圖片或者視頻，利用Canvas來呈現，通過捕獲一系列鼠標事件進行交互，我相信隨着對全景組件的深入瞭解，我們會提供更多更有趣的交互，讓我們的產品或者服務成就我們的客戶，成爲他們不可或缺的一部分，讓我們一起爲公司創造價值。若是我的文章對你有所啓發，那將是我莫大的榮幸。希望和您一起精進，成爲更好的自己。