全景漫游方案(web+手机)

1、全景漫游方案（web+手机）一、项目概况建设背景传统的博物馆大多没有网上展馆的功能，观众往往要花费很长的时间和精 WEB体验的目的，改善传统博物馆的不足 。建设内容3D展。透过指尖的触碰全方位重现场景全貌，更可动态地欣赏全景的全部或某一部分的细节，最大限度的主动化视角，从大特写到超广角，或远或近、或俯或仰， 自主操控展示方式。序号制作内容说明1全景图片拍摄不少于 20 个点，每个点位拍摄 6 张2全景图片处理清晰度、影调、色彩、曝光按标准处理3全景图片拼接无拼接错位，无拼接痕迹。4PC 端下一场景指引;重点展品介绍5手机端下一场景指引;重点展品介绍6服务器部署上线测试及部署到指定服务器二、项目

2、内容为上海中心丝绸文化盛宴展览采集 2017 年馆内全年展览的 360游览数据，并提供多套版本以供不同渠道的应用，具体版本要求如下：互联网应用：每张全景图像的分辨率为 2150010750，为网站访问者提供在线展览的 360全景游览。移动终端应用：每张全景图像分辨率为 20482048，为微信公众平台等提供在线展览的 360全景游览。展览的全景游览具体功能实现360180进行拖动操作， 展品的访问及显示进行展示，用户通过点击兴趣点或展品框体的方式就可以便捷的浏览。实现如下功能需求，但不限于这些功能展品及展览内容以图标/兴趣点进行点击弹出展示功能支持图文展示；（建议不易过多）（建议视频不易太长支

3、持展品高清大图展示；支持图文展示；支持音频介绍；数据保护和加密为了保护原始数据的安全，避免原始数据直接在网上泄露、传播， 项目承接方对原始数据进行加密保护，使得用户无法在本系统外直接使用。项目承接方提交所有原始数据交由馆方保存，不得保留备份。利 用Stitcher 、PTGUI、Pano2vr利 用Stitcher 、PTGUI、Pano2vr具进行球状全景图制作。（IPOF_CMCS把拍摄的照片拼合，发布成可以播放和浏览的格式。具体制作过程和技术路线如下：现场实景图像图像生成鱼眼渲染对图像进行拼接的技巧设计。生成鱼眼渲染对图像进行拼接的技巧设计。利用凭接软件制作球状 360全景图利用凭接软件

4、制作球状 360全景图特效技术处理配置热点制作程序开发全景系配置关键热点区域、热点介绍。特效技术处理配置热点制作程序开发全景系配置关键热点区域、热点介绍。实景场景实景图实景场景实景图全景图片采集使用全景相机来直接采集一张柱面全景图像全景图片规范目的为了满足全景图展现时所需要的数据，通过拍摄人员前期对景区内部的拍摄、后期加工处理，使成果数据最终达到公司规格需求。要求1) 文件格式：JPG 格式2) 成图像素：不得低于 81924096 定义全景图：即通过对专业相机捕捉整个场景的图像信息或者使用建模软件面照片或者计算机建模图片变为 360 度全观。拍摄选点选点规则展览入口处第一章宋庆龄纪念广场全景

5、（含宋庆龄汉白玉雕像）宋氏墓地（全景、宋庆龄墓）名人墓园外籍人墓园选点拍摄要求正门外景尽量一张全景图表现所有的细节和内容；画面中前后左右的构图要美观，内容要丰富；Logo富立体感强烈。特色地方对特色地方一张全景图表现所有内容；画面中前后左右的构图要美观，具有一定的艺术性。内容要丰富，主题殊场景除外，如：雪景。烈，可以突出主体。升高三脚架拍摄，可以的话可以采用高杆拍摄。拍摄时间要求间段：除特殊景色外，如：日出、晚霞；9：00-18：30。9：30-16：30。8KM=4沙、雾、霾等天气时不能进行采集。拍摄方法16mm 或更短并且视角接近 180拍摄要求定，不要移动，拍摄完毕后方可移动三角架；拍摄

6、过程中，尽量避开大树，行人等对象，寻找开阔的地点进行拍摄。1/2景点需要重新拍摄；全闭合导致的画面不清晰现象；自检内容每拍摄完一组图片后，都需要对拍拍摄的图片成果进行自检，自检内容为：图片中是否存在人的比例过大情况；图片中是否存在相机带、头发等景物；图片是否存在过曝/欠曝的情况；图片中是否存在跑焦的现象；图片中是否存在由于快门过慢导致焦距不清晰的情况；图片中是否存在由于抖动等误操作造成画面不清晰的情况；图片中是否存在脏点的情况（可检验天空上是否有存在脏点的情况。全景图的拼接cool 360，PTGui Realviz ，Pixtra PTGui Pro（以鱼眼照片为例。图像的预处理投影变换图像

7、配准图像融合图像的预处理投影变换图像配准图像融合图像的预处理（1）2能中可以对加载的照片进行排序、剪裁工作，并且设置镜头的参数。排序：调整好照片的左右位置，便于正确拼接。（180。投影变换如景物中的直线在拼接后 会变成折线。为了保证实际景物的空间约束关系，在取难易程度和观察效果上均有很大的差异。图像配准相邻两图像间的拼接位置。这主要是因为相机在拍摄图像序列时由于拍摄时间、 拍摄角度、自然环境的变图像融合觉；二是尽可能地保持图像的质量。对准图像：准备工作完了之后就可以对准图像，也就是照片拼接。此3photoshop层以及保存路径。选择好后就可以输出了。构建全景漫游系统swfpano2vrflas

8、hpano2vrflashpano2vr默认就行当然也可以根据需求选择“立面体”、“柱形”、“平面”等类型。户数据”标签中设置用户信息，在“交互热区”标签中设置场景切换热键，在“音频”标签中加入音频到全景中。在“输出”标签中选择“flash”皮肤或自制的皮肤加载其中。一个简单的全景图漫游就完成了。发布虚拟全景网页pano2vr作。flashflash“HTML”标签，开启HTMLHTMLHTML以下代码是代码，加上了注释：以下代码是代码，加上了注释：= ;/CSS3DObjectobject3Dvar object = new ( element );););( object );/渲染器也是

9、拓展出来的方法，见renderer = new ();( ,););/添加鼠标，手势，窗口事件( mousedown, onDocumentMouseDown, false );( wheel, onDocumentMouseWheel, false );( touchstart, onDocumentTouchStart, false );( touchmove, onDocumentTouchMove, false );( resize, onWindowResize, false );function onWindowResize() /窗口缩放的时候，保证场景也跟随着一起缩放=/ ()

10、;( ,);function onDocumentMouseDown( event ) ();/保证监听拖拽事件( mousemove, onDocumentMouseMove, false ); ( mouseup, onDocumentMouseUp, false );function onDocumentMouseMove( event ) /鼠标的移动距离=-varvarmovementX =movementY =| 0;| 0;lon lat-= movementX+= movementY* ;* ;function onDocumentMouseUp( event ) /保证监听拖

11、拽事件( mousemove, onDocumentMouseMove ); ( mouseup, onDocumentMouseUp );function onDocumentMouseWheel( event ) /相机的视觉随着鼠标滚动的距离拉进或者远离+=* ();function onDocumentTouchStart( event ) ();/movement，touchXtouchY离var touch = 0 ;touchX = ; touchY = ;function onDocumentTouchMove( event ) ();vartouch = 0 ;lon-= (- touchX ) *;lat+= (- touchY ) *;touchX=;touchY=;/开启动画function animate() requestAnimationFrame( animate lon