vue组件使用 - photo-sphere-viewer加载360°全景图片

博客力求最简单，最有效，尽量少用术语。

第一步：安装依赖

npm install three --save
npm install photo-sphere-viewer --save

第二步：引入依赖并使用

import PhotoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

this.displayPanoramadata = true
this.panoramadata = PhotoSphereViewer({container: this.div, // 必须的参数：绑定的容器panorama: this.imgurl, // 必须的参数：图片路径size: {width: '680',height: '400'}
})
}

这样就可以配置一个最初级的全景浏览。

番外：参数配置：

这里只列举了一些常见的配置，更加详细的配置可以自行查找。

番外：效果图：

vue组件使用 - photo-sphere-viewer加载360°全景图片相关推荐

Vue组件代码分块和懒加载
前端开发中,随着业务和页面增加,以组件为基本单位的结构下,组件数量会增长极快,为了优化我们会很显然地想要进行一些工作: 代码分块懒加载非必要资源文件非必要资源,指的首次渲染出某页面所不必要的资源, ...
vue与单页面使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于:http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中,若有侵权请 ...
Vue组件库实现按需加载功能
文章目录简述示例原理 babel-plugin-component element-ui按需引入 babel-plugin-import 组件分开打包以及全部打包组件分开打包组件全部打包入口 ...
vue按需加载组件_微人事首页加载速度提高了 5 倍，我都做了什么？
「本文之前发过,但是比较零散,这里我把用到的方案都汇总一下,方便大家索引,有需要的小伙伴可以收藏下方便查找.里边提到的几种方案,大家都可以对照着视频试一下」 ElementUI 按需加载: 服务端开启 ...
Photo Sphere Viewer 全景图
Photo Sphere Viewer 一款基于 three.js 的简易3D插件,方便,实用,友好,看到网上有些API有错误,所以自己写一个修正版的该js插件可以360度旋转查看全景图,也可以上 ...
Photo Sphere Viewer渲染全景图片
下载官方网站: ---- https://photo-sphere-viewer.js.org 附属依赖必选项: ---- three.js ---- browser.js 注: 可以直接使用 np ...
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
vue高德、谷歌地图动态加载
vue高德.谷歌地图动态加载前言引入地图资源页面使用完整map.js 前言因为我们这个项目,做的是国际化项目,考虑的是,在国内使用高德地图,在国外使用谷歌地图,所以在这里做了个动态引入地图, ...
vue项目结构及启动文件加载过程分析
vue项目结构及启动文件加载过程分析一.vue项目结构 1.导入项目准备好开发工具Visual Studio Code,导入生成的项目案例.我的Vue版本: 2.项目目录及文件说明 2.1.项目主 ...

vue组件使用 - photo-sphere-viewer加载360°全景图片

第一步：安装依赖

第二步：引入依赖并使用

番外：参数配置：

番外：效果图：

vue组件使用 - photo-sphere-viewer加载360°全景图片相关推荐

最新文章

热门文章