[置顶] 实现360度全景图像的利器--PanoramaGL
传送门 ☞轮子的专栏 ☞转载请注明 ☞ http://blog.csdn.net/leverage_1229
介绍
本指南将介绍一个PanoramaGL 0.1类库的简单用法,更多的细节请签出 HelloPanoramaGL示例查看。
细节
1如何导入PanoramaGL类库?
1.1从源代码中导入
(1)下载PanoramaGL_0.1.zip或从代码仓库下载源代码
(2)如果你下载zip文件然后解压该文件
(3)在Eclipse中导入PanoramaGL项目:
点击“File”选择“Import”菜单;
选择“General”目录中的“Existing Projects into Workspace”,点击“Next”按钮;
点击“Browse”按钮,选择PanoramaGL项目文件夹
点击“Finish”按钮。
(4)右键单击你的项目并选择“Properties”选项
(5)选择左侧面板“Android”选项
(6)找到右侧面板“Library”部分,点击“Add...”按钮
(7)选择“PanoramaGL”类库,点击“OK”按钮
(8)在属性窗口的右下角选择“OK”按钮表示接受更改
1.2从编译后的文件中导入
(1)下载libglues.zip
(2)解压zip文件并复制到你的项目的“libs”文件夹中
(3)下载PanoramaGL 0.1.jar
(4)复制jar文件到你的项目的“libs”文件夹中
(5)在你的项目中导入jar文件:
右键单击你的项目并选择“Properties”选项;
选择左侧面板“Java Build Path”选项;
选择“Libraries”选项卡;
点击“Add JARs”按钮;
在你的项目中选择“libs/PanoramaGL_0.1.jar”文件;
点击“OK”按钮;
在属性窗口的右下角选择“OK”按钮表示接受更改。
2在应用程序中如何使用PanoramaGL?
(1)如前面描述那样导入类库
(2)在“res/raw”文件夹中导入一个球面图像(如:pano_sphere.jpg)
(3)在Activity中,你需要构建一个全景图像的查看器,具体做法如下:
继承PLView类
public class YourActivity extends PLView
在onCreate()方法中加载全景图像
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
PLSphericalPanorama panorama = new PLSphericalPanorama();
panorama.setImage(this.getCurrentGL(), PLImage.imageWithBitmap(PLUtils.getBitmap(this, R.raw.pano_sphere)));
this.setPanorama(panorama);
}
注意:如果有必要的话,你也可以从其他方法中加载全景图像或事件。
3简单JSON协议
同样,你可以使用JSON协议加载全景图像。
注意:在该版本中,JSON协议被限制只处理本地文件。
3.1源代码
this.load(new PLJSONLoader(this, "res://raw/json_spherical"));
注意:在我的应用程序的“res/raw”文件夹中有一个名为“json_spherical.data”的文件,可以使用这段代码加载。或
this.load(new PLJSONLoader(this, "file:///sdcard/files/json_spherical.data"));
注意:在Android设备的“/sdcard/files”文件夹中有一个名为“json_spherical.data”的文件,可以使用这段代码加载。
3.2JSON协议
{
"urlBase": "file:///sdcard/files", //URL base where the files are
//The options are res:// for application resources and file:// for file system (this feature will be improved to support the http protocol)
"type": "spherical", //Panorama type: [spherical, spherical2, cubic, cylindrical]
"sensorialRotation": false, //Automatic rotation using sensors [true, false] <Optional>
"scrolling": //Scrolling section <Optional>
{
"enabled": false //Enable scrolling feature [true, false] <Optional>
},
"inertia": //Inertia section <Optional>
{
"enabled": false, //Enable inertia feature [true, false] <Optional>
"interval": 3 //Inertia's interval in seconds <Optional>
},
"accelerometer": //Accelerometer section <Optional>
{
"enabled": false, //Enable the accelerometer feature [true, false] <Optional>
"interval": 0.033, //Update interval of accelerometer (this value must be calculated as 1/frequency) <Optional>
"sensitivity": 10.0, //Sensitivity of the accelerometer <Optional>
"leftRightEnabled": true, //Enable the direction of movement with the accelerometer (left/right) <Optional>
"upDownEnabled": false //Enable the direction of movement with the accelerometer (up/down) <Optional>
},
"images": //Panoramic images section
//A property can be a name e.g. preview.jpg, preview or URL e.g. file:///sdcard/files/preview.jpg, res://raw/preview
//if a property only have a name, the real path will be the urlBase + image name
{
"preview": "preview.jpg", //Preview image name or URL (this option will be used with http protocol) <Optional>
"image": "pano.jpg" //Panoramic image name or URL for spherical, spherical2 and cylindrical panoramas
"front": "front.jpg", //Front image name or URL for cubic panorama (only use with cubic panorama)
"back": "back.jpg", //Back image name or URL for cubic panorama (only use with cubic panorama)
"left": "left.jpg", //Left image name or URL for cubic panorama (only use with cubic panorama)
"right": "right.jpg", //Right image name or URL for cubic panorama (only use with cubic panorama)
"up": "up.jpg", //Up image name or URL for cubic panorama (only use with cubic panorama)
"down": "down.jpg" //Down image name or URL for cubic panorama (only use with cubic panorama)
},
"camera": //Camera settings section <Optional>
{
"vlookat": 0, //Initial vertical position [-90, 90]
"hlookat": 0, //Initial horizontal position [-180, 180]
"atvmin": -90, //Min vertical position [-90, 90]
"atvmax": 90, //Max vertical position [-90, 90]
"athmin": -180, //Min horizontal position [-180, 180]
"athmax": 180 //Max horizontal position [-180, 180]
},
"hotspots": [ //Hotspots section (this section is an array of hotspots) <Optional>
{
"id": 1, //Hotspot identifier (long)
"atv": 0, //Vertical position [-90, 90]
"ath": 0, //Horizontal position [-180, 180]
"width": 0.08, //Width
"height": 0.08, //Height
"image": "hotspot.png" //Image name or URL
}
]
}
3.3看到
PLJSONLoader类和PLView加载方法。
json_spherical.data、json_spherical2、json_cylindrical.data和json_cubic.data都位于
HelloPanoramaGL示例的“res/raw”文件夹中。
4更多信息
想获得更多信息,请签出HelloPanoramaGL示例,该示例运行在Android2.x或以上版本。
5效果图
[置顶] 实现360度全景图像的利器--PanoramaGL的更多相关文章
- [置顶] ios 360度旋转效果demo
demo功能:用UIimageView实现360度旋转效果. demo说明:iPhone6.1 测试成功.主要代码在:FVImageSequence.m中.在touchesMoved事件中,通过替换U ...
- jQuery Panorama Viewer – 360度全景展示插件
jQuery Panorama Viewer 这款插件可以帮助你在网站中嵌入全景图片.要做到这一点,首先只需要在页面中引入最新的 jQuery 库,以及 jquery.panorama_viewer. ...
- 基于Three.js的360度全景--photo-sphere-viewer--简介
这个是基于three.js的全景插件 photo-sphere-viewer.js ---------------------------------------- 1.能添加热点: 2.能调用陀 ...
- HTML5 Canvas实现360度全景图
原文:http://blog.csdn.net/jia20003/article/details/17172571 很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买 ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- 【Android开发VR实战】二.播放360°全景视频
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53924006 本文出自[DylanAndroid的博客] [Android开发 ...
- js之滚动置顶效果
0.js获取高度 ? 1 2 3 4 5 6 document.all // 只有ie认识 document.body.clientHeight // 文档的高,屏幕 ...
- 利用Canvas实现360度浏览
前言:最近几个月来到新公司,主要从事移动端方面的开发,有时候也挺忙挺累的,于是就好一段时间没写博客了.其实自己在这几个月里,自己对canvas以及createjs和egret都有了一定程度上的认识与掌 ...
- 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实 ...
随机推荐
- bigdata_一篇文看懂Hadoop
本文转载:暂未找到原出处,如需署名 请联系 我们很荣幸能够见证Hadoop十年从无到有,再到称王.感动于技术的日新月异时,希望通过这篇内容深入解读Hadoop的昨天.今天和明天,憧憬下一个十年. 本文 ...
- php+flash头像上传组件
有会员系统的站点一般都会有一个头像上传组件,一般做的最简单的是 这样的方式长处是代码写的简单,仅仅要推断图片大小和类型,然后更新数据库.可是用户体验不高.并且站点其它页面假设要使用较小的20X20或1 ...
- android 实现真正意义上的服务及源代码下载
android APP后台服务和长期server长期互动,保证实时数据,这个小项目主要实施app退出后仍然能够执行服务. 使用该系统的Intent.ACTION_TIME_TICK现,这个系统的广播每 ...
- 各种加密解密函数(URL加密解密、sha1加密解密、des加密解密)
原文:各种加密解密函数(URL加密解密.sha1加密解密.des加密解密) 普通hash函数如md5.sha1.base64等都是不可逆函数.虽然我们利用php可以利用这些函数写出可逆函数来.但是跨语 ...
- js小记 function 的 length 属性
原文:js小记 function 的 length 属性 [1,2,3]., ,这个略懂js的都知道. 但是 eval.length,RegExp.length,"".toStr ...
- JavaEE(1) - Weblogic 服务器管理的数据源
JBoss下载: http://jbossas.jboss.org/downloads http://www.cnblogs.com/xw-cnblogs/articles/2439969.html ...
- win7安装ruby on rails开发环境
前言 我们看到很多文章说ruby环境windows它是非常困难的基础上,这将是各种稀奇古怪的问题,因此,建议linux和mac发. 可是我依照教程搭了下,问题也不算太多.总过大概花费了2个半小时左右就 ...
- T4模板生成不同部署环境下的配置文件
使用T4模板生成不同部署环境下的配置文件 在开发企业级应用的时候,通常会有不同的开发环境,比如有开发环境,测试环境,正式环境,生产环境等.在一份代码部署到不同环境的时候,不同环境的配置文件可能需要根据 ...
- RESTful API的设计原则
好RESTful API的设计原则 说在前面,这篇文章是无意中发现的,因为感觉写的很好,所以翻译了一下.由于英文水平有限,难免有出错的地方,请看官理解一下.翻译和校正文章花了我大约2周的业余时间, ...
- 清除css、javascript及背景图在浏览器中的缓存
在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...