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页面即可看到表单，点击创建按钮。
运行结果 - 图片来自我的手机
参考
个人收获及总结
本文介绍了如何在Vue项目中集成Panolens，也就是利用Three.js构建全景的浏览页面，将图片或者视频资源绑定后，就可以查看全景图片或者视频，利用Canvas来呈现，通过捕获一系列鼠标事件进行交互，我相信随着对全景组件的深入了解，我们会提供更多更有趣的交互，让我们的产品或者服务成就我们的客户，成为他们不可或缺的一部分，让我们一起为公司创造价值。若是我的文章对你有所启发，那将是我莫大的荣幸。希望和您一起精进，成为更好的自己。
网友评论