欢迎光临小鱼网个人网站!

登录/注册
基于three.js+photo-sphere-viewer.js 全景图场景切换

我们先来了解一下Photo Sphere Viewer,它是一款基于Three.js的360X180度全景图预览js插件。该js插件可以360度旋转查看全景图,也可以上下180度查看图片。使用该插件的唯一要求是浏览器支持canvas或WebGL。

Photo Sphere Viewer是纯JS,并且基于Three.js,允许在支持HTML Canvas的其他系统上支持WebGL系统(最新浏览器)以及相当不错的表现。它也可以与触摸屏一起工作!


1、使用该全景图插件时要引入three.min.js和photo-sphere-viewer.min.js文件。

下载photo-sphere-viewer.js



2、引入全景图片

其中url是全景图的地址,可以是网络链接,也可以是本地的,因为这个项目用的是服务器的图片,如果图片无法显示,可以自己替换一下

desc是设置的全景图的名称


var panos = [{

url: 'http://122.51.121.122:8066/image/01.jpg',

desc: '全景主页一',

target: {

longitude: 3.848,

latitude: -0.244

}

}, {

url: 'http://122.51.121.122:8066/image/02.jpg',

desc: '全景主页二',

target: {

longitude: 0,

latitude: 0

}

},

3、加载全景图

PhotoSphereViewer方法用来加载全景图片,其中注释已经比较全面了,就不细说


var PSV = new PhotoSphereViewer({

container: 'photosphere',//承载全景图的div盒子

panorama: panos[0].url,//全景图片的路径

caption: panos[0].desc,//标题

time_anim: false,

default_long: Math.PI / 2,

loading_img: '',

loading_txt: '',

cache_texture:10,

//导航栏是一个数组,它可以包含以下核心按钮:自动旋转、缩放、下载、标记、陀螺仪、立体声、全屏,以及用于创建自定义按钮的标题和对象

navbar: [

'autorotate', //自动旋转按钮

'zoom', //放大缩小按钮

'markers',

'spacer-1',

'caption', //显示上面caption参数按钮

'gyroscope', 

'fullscreen'//全屏按钮

],

anim_speed: "0.6rpm",//自动旋转速度


//引用自定义的标记

markers: (function() {

return common1();

}())

});

4、再附上我自己都看的想吐的参数和方法:

下面是它的参数列表:

panorama:必填参数,全景图的路径。

container:必填参数,放置全景图的div元素。

autoload:可选,默认值为true,true为自动调用全景图,false为在后面加载全景图(通过.load()方法)。

usexmpdata:可选,默认值为true,如果Photo Sphere Viewer必须读入XMP数据则为true。

default_position:可选,默认值为{},定义默认的位置,及用户看见的第一个点,例如:{long: Math.PI, lat: Math.PI/2}。

min_fov:可选,默认值为30,观察的最小区域,单位degrees,在1-179之间。

max_fov:可选,默认值为90,观察的最大区域,单位degrees,在1-179之间。

allow_user_interactions:可选,默认值为true,设置为false则禁止用户和全景图交互(导航条不可用)。

tilt_up_max:可选,默认值为Math.PI/2,向上倾斜的最大角度,单位radians。

tilt_down_max:可选,默认值为Math.PI/2,向下倾斜的最大角度,单位radians。

zoom_level:可选,默认值为0,默认的缩放级别,值在0-100之间。

long_offset:可选,默认值为PI/360,mouse/touch移动时每像素经过的经度值。

lat_offset:可选,默认值为PI/180,mouse/touch移动时每像素经过的纬度值。

time_anim:可选,默认值为2000,全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)

theta_offset:过时的选项,可选,默认值为1440,自动动画时水平方向的速度。

anim_speed:可选,默认值为2rpm,动画的速度,每秒/分钟多少radians/degrees/revolutions。

navbar:可选值,默认为false。显示导航条。

navbar_style:可选值,默认为{}。导航条的自定义样式。下面是可用的样式列表:

backgroundColor:导航条的背景颜色,默认值为rgba(61, 61, 61, 0.5)。

buttonsColor:按钮的前景颜色,默认值为transparent。

activeButtonsBackgroundColor:按钮激活状态的背景颜色,默认值为rgba(255, 255, 255, 0.1)。

buttonsHeight:按钮的高度,单位像素,默认值为20。

autorotateThickness:autorotate图标的厚度,单位像素,默认值为1。

zoomRangeWidth:缩放的范围,单位显示,默认值50。

zoomRangeThickness:缩放的范围的厚度,单位像素,默认值1。

zoomRangeDisk:缩放范围的圆盘直径,单位像素,默认值为7。

fullscreenRatio:全屏图标的比例,默认值为3/4。

fullscreenThickness:全屏图标的厚度,单位像素,默认值为2。

loading_msg:可选,默认值为Loading…,图片加载时的提示文字。

loading_img:可选,默认值为null,在加载时显示的图片的路径。

size:可选,默认值null,全景图容器的最终尺寸。例如:{width: 500, height: 300}。

onready:可选值,默认值为null。当全景图准备就绪并且第一张图片显示时的回调函数。


方法介绍

addAction():添加事件(插件没有提供执行事件的方法,似乎是提供给插件内部使用的)。

fitToContainer():调整全景图容器大小为指定大小。

getPosition():获取坐标经纬度。

getPositionInDegrees():获取经纬度度数。

getZoomLevel():获取缩放级别。

load():加载全景图()。

moveTo(longitude, latitude):根据经纬度移动到某一点。

rotate(dlong, dlat):根据经纬度度数移动到某一点。

toggleAutorotate():是否开启全景图自动旋转。

toggleDeviceOrientation():是否开启重力感应方向控制。

toggleFullscreen():是否开启全景图全屏。

toggleStereo():是否开启立体效果(可用于WebVR哦)。

zoom(level):设置缩放级别。

zoomIn():放大。

zoomOut():缩小。

————————————————


上一篇:html消息提示淡入淡出
下一篇:没有了

Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。