今天的越寫悅快樂(lè)之系列文章為大家?guī)?lái)ue項(xiàng)目如何集成Panolens.js的文章。作為一名追求的碼農(nóng)來(lái)說(shuō)，研究新技術(shù)并且應(yīng)用到產(chǎn)品中，是我們不懈的追求，大家有沒有實(shí)踐過(guò)使用Panolens.js來(lái)構(gòu)建我們的全景地圖瀏覽頁(yè)面呢？今天我為大家分享一下如何在Vue項(xiàng)目中集成Panolens.js。
Panolens.js是一款基于事件驅(qū)動(dòng)和WebGL的輕量和可擴(kuò)展的全景視圖組件，它基于three.js 構(gòu)建，想了解相關(guān)內(nèi)容，請(qǐng)參考GitHub
開發(fā)環(huán)境
- Window 10.0.17763
- Node 10.18.0
- Visual Studio Code 1.48.2
- Vue 2.6.12
- Vue CLI 4.5.9
接入步驟
創(chuàng)建項(xiàng)目
我們可以通過(guò)兩種方式來(lái)創(chuàng)建項(xiàng)目：
1）命令行
-
vue create panolens-vue(選擇默認(rèn)配置)
2）Vue UI
在命令行或者終端輸入vue ui即可打開默認(rèn)瀏覽器，然后選擇項(xiàng)目存放位置、輸入項(xiàng)目信息、包管理方式等信息，最后點(diǎn)擊創(chuàng)建工程。
安裝Panolens依賴
我們?cè)诮K端下執(zhí)行以下命令：
yarn add vuejs-vr -S
vuejs-vr是Panolens.js的Vue封裝
項(xiàng)目配置文件
上一步我們安裝了vuejs-vr依賴，下面我們可以看一下具體的package.json配置文件，文件的內(nèi)容如下：
{
"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"
]
}
創(chuàng)建格式化配置文件
為了規(guī)范編寫的代碼，我們使用Prettier來(lái)格式化代碼，此時(shí)我們?cè)陧?xiàng)目根目錄下創(chuàng)建.prettierrc.js文件，并寫入以下內(nèi)容：
module.exports = {
semi: false,
singleQuote: true
}
然后我們就可以在VSCode的終端中輸入yarn lint命令來(lái)格式化代碼，隨后我們?cè)陧?xiàng)目根目錄下創(chuàng)建.vscode目錄，并寫入配置文件setting.json,文件內(nèi)容如下：
{
"editor.tabSize": 2,
"editor.formatOnSave": false,
"prettier.semi": true,
"prettier.singleQuote": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
編寫渲染組件
我們?cè)陧?xiàng)目的入口組件App.vue文件中引入vuejs-vr并在模板template標(biāo)簽中寫入組件，其文件內(nèi)容如下：
<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>
項(xiàng)目結(jié)構(gòu)
當(dāng)我們完成代碼的編寫后，可以看到項(xiàng)目的結(jié)構(gòu)如下圖所示：
查看結(jié)果
我們?cè)陧?xiàng)目所在的控制臺(tái)（或者終端）執(zhí)行yarn dev命令，然后通過(guò)Router跳轉(zhuǎn)到about頁(yè)面即可看到表單，點(diǎn)擊創(chuàng)建按鈕。
參考
個(gè)人收獲及總結(jié)
本文介紹了如何在Vue項(xiàng)目中集成Panolens，也就是利用Three.js構(gòu)建全景的瀏覽頁(yè)面，將圖片或者視頻資源綁定后，就可以查看全景圖片或者視頻，利用Canvas來(lái)呈現(xiàn)，通過(guò)捕獲一系列鼠標(biāo)事件進(jìn)行交互，我相信隨著對(duì)全景組件的深入了解，我們會(huì)提供更多更有趣的交互，讓我們的產(chǎn)品或者服務(wù)成就我們的客戶，成為他們不可或缺的一部分，讓我們一起為公司創(chuàng)造價(jià)值。若是我的文章對(duì)你有所啟發(fā)，那將是我莫大的榮幸。希望和您一起精進(jìn)，成為更好的自己。
