针对图片实现VR效果及360全景图片

vue实现的图片VR效果及360全景图片

在组建中下载依赖

cnpm i three --save-dev

cnpm install photo-sphere-viewer --save-dev //360图片全景预览插件

实现效果

//html<div class="PSViewer" ref="psvdbg"></div>// js<script>var THREE   = require('three');var PhotoSphereViewer   = require('photo-sphere-viewer');export default {data() {return {width:500,height:498,img:require('./../assets/a.jpg'),//想要预览的图片};},beforeDestory(){},mounted(){this.init();},methods: {// photo-sphere-viewerinit:function(){const self   = this;var PSV = new PhotoSphereViewer({// Panorama, given in base 64panorama: self.img,// Containercontainer: self.$refs.psvdbg,// Deactivate the animationtime_anim: false,// Display the navigation bar// navbar: true,navbar:['autorotate','zoom','fullscreen'],navbar_style:{backgroundColor:'rgba(58,67,77,0.7)'},size: {width: '100%',height: '200px' //图片要展示的高度}});},}};</script>// style<style lang="scss">.PSViewer{overflow: hidden;display: block;width: 100%;height: inherit;position: relative;.fix{position: fixed;left: 0;bottom: 0;right: 0;margin: 0 auto;width: 200px;}.psv-hud{width: 100%;height: 100%;display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 35px;z-index: 10;svg{display: block;width: 100%;height: 100%}}.psv-container{display: block;width: 100%;height: inherit;.psv-loader-container{width: 50px;height: 50px;margin: 0 auto;position: absolute;left: 0;right: 0;top: 50%;margin-top: -25px;*{max-width: 100%;max-height: 100%;}}}.psv-canvas-container{display: block;width: 100%;height: inherit;canvas{display: block;width: 100%;height: inherit;}}.psv-navbar{&.psv-navbar--open{position: absolute;bottom: 0;width: 100%;z-index: 60;padding: 8px 0;display: block;background-color: rgba(255,255,255,0.7);.psv-caption{display: inline-block;}.psv-button{display: inline-block;width: 20px;height: 20px;cursor: pointer;float: left;&.psv-zoom-button{float: left;width: auto;.psv-zoom-button-minus{width: 20px;float: left;height: 20px;background-color: transparent;line-height: 20px;color: rgba(255, 255, 255, 0.7);cursor: pointer;}.psv-zoom-button-range{float: left;padding: 10px 8px 0 8px;background-color: transparent;cursor: pointer;.psv-zoom-button-line{width: 50px;height: 2px;background-color: rgba(0, 0, 0, 0.7);position: relative;.psv-zoom-button-handle{position: absolute;top: -3px;left: -3.5px;width: 8px;height: 8px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.7);}}}.psv-zoom-button-plus{width: 20px;float: left;height: 20px;background-color: transparent;line-height: 20px;color: rgba(255, 255, 255, 0.7);cursor: pointer;}}&.psv-autorotate-button{margin-right: 8px;margin-left: 8px;}&.psv-fullscreen-button{float:right;margin-right: 8px;}}.psv-caption{height: inherit;}}}}
</style>

针对图片实现VR效果及360全景图片相关推荐

JQuery制作的toolTip，针对图片预览效果
昨天做了一个文字版的toolTip,后来想想现在大家都爱看图,文字未免有点单调了点,那我们就来个图片式的预览.代码比较简单,我就不多说了. 欢迎来到买礼网选购礼品! 畅游鄂西山水风光尽在恩施旅游 ...
【Android开发VR实战】一.给用户呈现一个360°全景图片
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53905681 本文出自[DylanAndroid的博客] [Android开发 ...
Unity3D for VR 学习(7): 360°全景照片
在VR应用中,有一个相对简单的虚拟现实体验,那就是360°全景照片浏览器, 他可以使得手机拍照的"全景"照片, 得以"恢复"当时拍照的场景全貌, 这个创意的 ...
什么是360°全景图片
现在科技发展日新月异,全景已经逐渐进入到大家的视野当中,但是很多人对360°全景并不是很熟悉,因为大家可能都见过,但是不知道是怎么做的,以为具体流程很复杂,也有人说360°只是把一个点周围的图像拍摄起 ...
VR站与360地图/搜索达成战略合作，推出VR全景营销投放新模式
VR站与360地图&360搜索正式达成战略合作,成为目前360搜索国内独家VR内容供应商.此次合作,为VR站商企客户新增了360系的投放推广渠道,进一步拓展VR全景引流获客的新路径.让商家低成 ...
android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
github unity 图片切换效果_CSS3图片模糊切换效果
今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用CSS3实现图片模糊效果也非常简单,用CSS3中的filter属性即可,针对不同浏览器用- ...
如何制作360度vr全景?制作360度全景效果图有哪些技巧?
360度VR全景图相信对摄影感兴趣的小伙伴一定不陌生,360度全景效果图不仅可以清楚真实的表现出场景,而且还具有很高的商用价值,360VR全景也成为了目前最受欢迎的新型展示方式,那么如何制作360度v ...

针对图片实现VR效果及360全景图片

vue实现的图片VR效果及360全景图片

在组建中下载依赖

cnpm i three --save-dev

cnpm install photo-sphere-viewer --save-dev //360图片全景预览插件

实现效果

针对图片实现VR效果及360全景图片相关推荐

最新文章

热门文章