越写悦快乐之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来呈现，通过捕获一系列鼠标事件进行交互，我相信随着对全景组件的深入了解，我们会提供更多更有趣的交互，让我们的产品或者服务成就我们的客户，成为他们不可或缺的一部分，让我们一起为公司创造价值。若是我的文章对你有所启发，那将是我莫大的荣幸。希望和您一起精进，成为更好的自己。