今天的越寫悅快樂之系列文章為大家?guī)韚e項目如何集成Panolens.js的文章。作為一名追求的碼農(nóng)來說旦装，研究新技術(shù)并且應(yīng)用到產(chǎn)品中低飒，是我們不懈的追求获雕，大家有沒有實踐過使用Panolens.js來構(gòu)建我們的全景地圖瀏覽頁面呢？今天我為大家分享一下如何在Vue項目中集成Panolens.js柿扣。
Panolens.js是一款基于事件驅(qū)動和WebGL的輕量和可擴展的全景視圖組件，它基于three.js 構(gòu)建，想了解相關(guān)內(nèi)容，請參考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)建項目
我們可以通過兩種方式來創(chuàng)建項目：
1）命令行
-
vue create panolens-vue(選擇默認(rèn)配置)
2）Vue UI
在命令行或者終端輸入vue ui即可打開默認(rèn)瀏覽器侄非，然后選擇項目存放位置蕉汪、輸入項目信息流译、包管理方式等信息，最后點擊創(chuàng)建工程者疤。
安裝Panolens依賴
我們在終端下執(zhí)行以下命令：
yarn add vuejs-vr -S
vuejs-vr是Panolens.js的Vue封裝
項目配置文件
上一步我們安裝了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來格式化代碼革砸，此時我們在項目根目錄下創(chuàng)建.prettierrc.js文件，并寫入以下內(nèi)容：
module.exports = {
semi: false,
singleQuote: true
}
然后我們就可以在VSCode的終端中輸入yarn lint命令來格式化代碼糯累，隨后我們在項目根目錄下創(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
}
}
編寫渲染組件
我們在項目的入口組件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>
項目結(jié)構(gòu)
當(dāng)我們完成代碼的編寫后泳姐，可以看到項目的結(jié)構(gòu)如下圖所示：
查看結(jié)果
我們在項目所在的控制臺（或者終端）執(zhí)行yarn dev命令效拭，然后通過Router跳轉(zhuǎn)到about頁面即可看到表單，點擊創(chuàng)建按鈕胖秒。
參考
個人收獲及總結(jié)
本文介紹了如何在Vue項目中集成Panolens缎患，也就是利用Three.js構(gòu)建全景的瀏覽頁面，將圖片或者視頻資源綁定后阎肝，就可以查看全景圖片或者視頻挤渔，利用Canvas來呈現(xiàn)，通過捕獲一系列鼠標(biāo)事件進行交互风题，我相信隨著對全景組件的深入了解判导，我們會提供更多更有趣的交互嫉父，讓我們的產(chǎn)品或者服務(wù)成就我們的客戶，成為他們不可或缺的一部分眼刃，讓我們一起為公司創(chuàng)造價值熔号。若是我的文章對你有所啟發(fā)，那將是我莫大的榮幸鸟整。希望和您一起精進引镊，成為更好的自己。
