全景漫游方案web+手机.docx

1、全景漫游方案web+手机全景漫游案（web+手机）一、项目概况 1.1 建设背景传统的博物馆大多没有网上展馆的功能，观众往往要花费很长的时间和精力，亲自到博物馆，才能了解博物馆的部环境、展品的摆放位置、和相关说明。这样对博物馆的影响打了很大的折扣，不利于知识的传播和教育。即使是现有的部分网上展馆系统，大部分是通过图片和文字来进行容介绍，观众只能被动的接收，缺少互动性，因而观众的参与意愿较低。本项目针对这些问题，设计并制作了一套架构于WEB和手机端的的全景虚拟参观系统，可以让参观者用鼠标或手指滑动在博物馆中达到认识、学习、导览和体验的目的，改善传统博物馆的不足 。1.2 建设容以超高清摄像设备全

2、视角拍摄作品全貌。与静态的二维平面图片不同，全景摄影借助于计算机和互联网技术，让人能够身临其境，在仿真的3D环境之中观展。透过指尖的触碰全位重现场景全貌，更可动态地欣赏全景的全部或某一部分的细节，最大限度的主动化视角，从大特写到超广角，或远或近、或俯或仰，自主操控展示式。序号 制作容说明1全景图片拍摄不少于20个点，每个点位拍摄62全景图片处理清晰度、影调、色彩、曝光按标准处理3全景图片拼接无拼接错位，无拼接痕迹。4PC端 下一场景指引;重点展品介绍5手机端下一场景指引;重点展品介绍6服务器部署上线测试及部署到指定服务器二、项目容 1) 为上海中心丝绸文化盛宴展览采集 2017 年馆全年展览的

3、 360全景游览数据，并提供多套版本以供不同渠道的应用，具体版本要求如下：互联网应用：每全景图像的分辨率为 2150010750，为访问者提供在线展览的 360全景游览。移动终端应用：每全景图像分辨率为 20482048，为微信公众平台等提供在线展览的 360全景游览。2)展览的全景游览具体功能实现作为实体展览的网络延伸，展览全景不仅需要通过多媒体应用版及管留档版进行存留，还需要通过互联网进行呈现，为突破了传统互联网浏览局限，需满足通过移动终端的式将展览全景呈现在观众面前，需项目承接保证用户在访问过程中全位的对全景进行游览，即水平360和垂直 进行拖动操作，要现全向平滑转动；提供两种拖动操作式

4、，即全景转动向和鼠标拖动向同向与反向，以满足不同用户的使用习惯；实现放大、还原功能，可以对全景进行逐级放大，并且在放大后能够逐级还原到初始大小；需提供手动游览和自动游览两种浏览式。3)展品的访问及显示在全景场景中，将图文、音频、视频介绍以及高清大图整合于一个播放器进行展示，用户通过点击兴趣点或展品框体的式就可以便捷的浏览。实现如下功能需求，但不限于这些功能展品及展览容以图标/兴趣点进行点击弹出展示功能支持图文展示；支持音频介绍；（建议不易过多）支持视频介绍；（建议视频不易太长）支持展品高清大图展示；展品及展览容以图层线框进行点击弹出展示功能支持图文展示；支持音频介绍；4) 数据保护和加密为了保

5、护原始数据的安全，避免原始数据直接在网上泄露、传播，项目承接对原始数据进行加密保护，使得用户无法在本系统外直接使用。项目承接提交所有原始数据交由馆保存，不得保留备份。三、项目实施 全景漫游是指在由全景图像构建的全景空间里进行切换，达到浏览各个不同场景的目的。全景漫游系统的实现是需要相应的硬件和软件的结合。首先需要相机和鱼眼镜头、云台、三角架等硬件来拍摄出鱼眼照片，然后使用全景拼接软件把拍摄的照片拼合，发布成可以播放和浏览的格式。具体制作过程和技术路线如下： 现场实景图像采集生成鱼眼图渲染技术利用凭接软件制作球状 360全景图特效技术处理配置热点制作程序开发全景系统实景场景实景图对图像进行拼接的

6、技巧设计。利用Stitcher、PTGUI、Pano2vr等主流工具进行球状全景图制作。（使用IPOF_CMCS凭接算法）配置关键热点区域、热点介绍。 3.1 全景图片采集使用全景相机来直接采集一柱面全景图像3.2 全景图片规3.21 目的 为了满足全景图展现时所需要的数据，通过拍摄人员前期对景区部的拍摄、后期加工处理，使成果数据最终达到公司规格需求。3.22 要求 1) 文件格式：JPG 格式2) 成图像素：不得低于 819240963.23 定义3) 全景图：即通过对专业相机捕捉整个场景的图像信息或者使用建模软件渲染过后的图片，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照片或

7、者计算机建模图片变为 360 度全观。拍摄选点 3.24选点规则 1.展览入口处2.第一章 3.宋庆龄纪念广场全景（含宋庆龄汉白玉雕像）4.宋氏墓地（全景、宋庆龄墓）5.名人墓园6.外籍人墓园3.25 选点拍摄要求 ?正门外景1) 尽量一全景图表现所有的细节和容；2) 画面中前后左右的构图要美观，容要丰富；3) 突出景区的Logo 和主建筑，光线最好是侧光或者顺侧光，使得层次丰富立体感强烈。?特色地1) 对特色地一全景图表现所有容；2) 画面中前后左右的构图要美观，具有一定的艺术性。容要丰富，主题要求完整、空出亮点、体现细节。图片色彩鲜明，不存在色调单一的情况，但特殊场景除外，如：雪景。3)

8、需要突出的部分，光线最好是侧光或者顺侧光，这样层次丰富立体感强烈，可以突出主体。4) 升高三脚架拍摄，可以的话可以采用高杆拍摄。5) 尽量找高位拍摄，画面上既可以俯览也可以仰望，使得画面更大气。 - 在拍摄全景的时候，都是以一个点作为中心，360度拍摄，所以不能在高位拍摄。3.26拍摄时间要求 收集待采集区域的天气情况，结合采集计划，合理安排实采计；建议拍摄时间段：除特殊景色外，如：日出、晚霞；1) 正常天气，春夏采集时间段约为：白景9：00-18：30。 2) 正常天气，秋冬采集时间段约为：白景9：30-16：30。 3) 天气要求：天气需晴好，能见度需在8KM 以上，风力=4 级，若出现扬

9、沙、雾、霾等天气时不能进行采集。3.27 拍摄法 拍摄全景图的设备都有一定的要求，一般都用鱼眼镜头。鱼眼镜头是一种焦距为 16mm 或更短并且视角接近 的镜头，它是一种广角镜头，“鱼眼儿镜头”是它的俗称。3.28 拍摄要求1) 尽量安排在游人较少的时间段进行采集工作。拍摄过程中，相机保持固定，不要移动，拍摄完毕后可移动三角架；2) 拍摄过程中，尽量避开大树，行人等对象，寻找开阔的地点进行拍摄。有游人明显接近取景框时，需要等其离开再进行拍摄，避免不相关的人员占据相片的1/2。同一组相片必须同时拍完，若拍摄过程中被行人或车辆等打断，此场景点需要重新拍摄；3) 在同一个场景点拍摄过程中，相机的移动速

10、度不要太快，避免快门未完全闭合导致的画面不清晰现象；4) 关闭相机中的日期、时间项。时间、日期不能出现在图片中。3.29 自检容每拍摄完一组图片后，都需要对拍拍摄的图片成果进行自检，自检容为：1) 图片中是否存在人的比例过大情况；2) 图片中是否存在相机带、头发等景物；3) 图片是否存在过曝/欠曝的情况；4) 图片中是否存在跑焦的现象；5) 图片中是否存在由于快门过慢导致焦距不清晰的情况；6) 图片中是否存在由于抖动等误操作造成画面不清晰的情况；7) 图片中是否存在脏点的情况（可检验天空上是否有存在脏点的情况）。3.3 全景图的拼接全景照片的拼接主要使用现有的软件就能完成。现在国外有很多拼接软

11、件可供使用，如cool 360，PTGui Pro， Realviz Stitcher5.1，Pixtra Viewer，上海杰图的造景师等等。下面就用PTGui Pro进行全景照片的拼接（以鱼眼照片为例。图像的预处理投影变换图像配准图像融合图像的预处理在图像采集的过程中，由于自然或人为因素，图像之间的亮度、灰度、颜色和形状等属性会有所不同，所以需要对图像中出现的几失真、对比度低、变形等情况进行预处理，从而提高图像的质量以保证图像配准和拼接过程的顺利进行。（1）加载图像：选择要拼接的2或多照片，加载到此软件中，在此功能中可以对加载的照片进行排序、剪裁工作，并且设置镜头的参数。排序：调整好照片的

12、左右位置，便于正确拼接。剪裁：可以修剪照片中不需要的边缘部分，如鱼眼照片可能会有黑边，可以用此功能对其进行去除。镜头的参数：可以选择“自动”选项，让软件自动判断设置此参数，但如果已知镜头参数的话，可以手动设置（拼接鱼眼照片镜头类型为：环形，水平角度一般为180）。投影变换由于采集到的一组反应全景的图像是在不同角度下拍摄的，因此这组图像并不在同一个投影平面上，并且投影平面之间存在着一定的夹角，如果对这组重叠的图像直接进行拼接的话，则会破坏实际景物中各个对象之间的视觉一致性，例如景物中的直线在拼接后 会变成折线。为了保证实际景物的空间约束关系，在拼接全景图像之前，必须将所得到的反映各自投影平面的图

13、像统一的投影到同一个坐标系上，一般有立体形、球形和圆柱形三种模型。不同模型的全景图在存取难易程度和观察效果上均有很大的差异。图像配准图像配准算法是全景图拼接技术的核心和关键，图像配准算法的好坏将直接影响到全景图的拼接质量。基本思想是对重叠图像采用一定的匹配策略，以确定相邻两图像间的拼接位置。由于图像配准技术在众多领域中起着非常重要作用，因此国外的研究者们对其进行了深入的研究，并提出了很多种配准法，但是目前还存在着很多问题。 这主要是因为相机在拍摄图像序列时由于拍摄时间、 拍摄角度、自然环境的变化、多种传感器的使用和传感器本身的缺点，使得拍摄的图像序列不仅受噪声的影响而且存在着重的灰度失真和几畸

14、变，在这种条件下，相机所获取的待配准图像序列之间就必然存在着差异。因此如统一这种差异，以及配准精度的提高、速度的提高、匹配正确率的提高、棒性和抗干扰 性的增强以及并行实现等问题都是制约配准技术发展的重要因素。图像融合拼接后的图像由于分辨率和视角的不同以及受到光照等因素的影响，在图像拼接的重叠部分会产生模糊、鬼影或噪声点，边界处也可能有明显的接缝。为了 改善拼接图像的视觉效果和质量，需要对拼接后的图像进行融合处理。即图像融合是指图像拼接中调整配准后，对图像的像素值进行处理的过程。它使图像在拼接后不会看出拼接的痕迹同时融合后的图像也尽可能地保持原有图像的质量。也就是说通过图像融合，必须达到两个目的

15、：一是使图像间的接缝在视觉上不可察觉；二是尽可能地保持图像的质量。（1）对准图像：准备工作完了之后就可以对准图像，也就是照片拼接。此功能也可以让软件自动完成，但一般都需要手动加入一些控制点。在“控制点”标签下，选择要拼接的两照片，在相重合的地点击，选择至少3个同名像点，这些同名像点遵循均匀分布的原则。完成后进行一下“优化”处理，判断同名像点选取的是否合理，如果优化器优化后结果不错，可以接受优化并可以在全景编辑器中查看拼接的全景照片，并且可以对照片进行整体编辑，选择视野、投影式等。在此功能中还能进行曝光/HDR的调整，修改拼接好的全景图，当然也可以在photoshop中进行。（2）创建全景图：在

16、此功能中可以选择要输出的全景图的尺寸、格式、图层以及保存路径。选择好后就可以输出了。3.4构建全景漫游系统漫游是在建立一个场景的项目之后，对多个场景的交互和跳转，其容包括位置和漫游两部分，当柱面全景制作好后，所得到的仅仅是单个视点的浏览，并不能称之为是真正的虚拟现实实景，必须对制作好的全景进行合理地空间编辑和组织。本课题采用软件将全景图导入后，进行一些参数的设置，根据实际需要可以修改图像质量，显示大小和播放帧数；如需全景自动旋转，可以点击右边的开启自动旋转功能，一般选择加载完毕后开始旋转。最后选择输出一个swf文件格式，在全景制作时，将全景展示文件嵌入在某页面里，发布后，即可供使用者浏览。制作

17、全景图像，实现全景漫游。现在国外也有多软件能够完成，如上海杰图的漫游大师、pano2vr等。由于现在flash插件的广泛使用，因此下面使用pano2vr软件制作flash格式的全景漫游。（1）选择要制作的全景图，用pano2vr软件打开，输入类型选择“自动”默认就行当然也可以根据需求选择“立面体”、“柱形”、“平面”等类型。（2）可以“显示参数”标签中设置初始视场的位、大小等参数，在“用户数据”标签中设置用户信息，在“交互热区”标签中设置场景切换热键，在“音频”标签中加入音频到全景中。（3）在“输出”标签中选择“flash”格式输出，并且可以选择一个自带的皮肤或自制的皮肤加载其中。一个简单的全

18、景图漫游就完成了。3.5发布虚拟全景网页当一个全景制作好后，往往会将其发布到网上以供人们便于浏览，了解场景环境，因此发布虚拟全景网页势在必行。在pano2vr软件中就能便的实现此动作。在“输出”标签中选择flash格式后，点击后面的“增加”按钮，在弹出的flash输出设置框中选择“HTML”标签，开启HTML文件输出，对HTML文件的外部化、模板进行需求设置，完成之后会创建一个HTML文件，此文件就是将全景图发布到网上，实现虚拟漫游。以下代码是代码，加上了注释： /定义相机，场景，渲染器，是3D场景形成的三大要素 var camera, scene, renderer; /定义几体，材质，以及

19、几体加材质之后形成的网格 var geometry, material, mesh; /生成三维向量（0,0,0），相机的目标点 var target = new THREE.Vector3(); /lon 经度 竖着的 有东经 西经 ；lat 维度 横着的 有南纬 北纬 /该经纬表示相机的聚焦点，初始状态在前面 var lon = 90, lat = 0; /同样是相机的聚焦点，上面是角度，此处转化为弧度制 var phi = 0, theta = 0; /移动端用户输入的x，y var touchX, touchY; init(); animate(); function init() /

20、相机的默认位置在坐标系的原点 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); scene = new THREE.Scene(); /右手坐标系，z朝向观察者，即相机。下面是将六个面拼接成立体，分别对应 var sides = url: res/Bridge2/posx.jpg, /左侧 position: -512, 0, 0 , rotation: 0, Math.PI / 2, 0 , url: res/Bridge2/negx.jpg, /右侧 po

21、sition: 512, 0, 0 , rotation: 0, -Math.PI / 2, 0 , url: res/Bridge2/posy.jpg, /上侧 position: 0, 512, 0 , rotation: Math.PI / 2, 0, Math.PI , url: res/Bridge2/negy.jpg, /下侧 position: 0, -512, 0 , rotation: -Math.PI / 2, 0, Math.PI , url: res/Bridge2/posz.jpg, /前 position: 0, 0, 512 , rotation: 0, Math

22、.PI, 0 , url: res/Bridge2/negz.jpg, /后 position: 0, 0, -512 , rotation: 0, 0, 0 ; /将六个图片添加到场景中 for ( var i = 0; i sides.length; i + ) var side = sides i ; var element = document.createElement( img ); element.width = 1026; / 2 pixels extra to close the gap. element.src = side.url; /CSS3DObject 是拓展出去的

23、法，原型是object3D，见CSS3DRenderer.js var object = new THREE.CSS3DObject( element ); object.position.fromArray( side.position ); object.rotation.fromArray( side.rotation ); scene.add( object ); /渲染器也是拓展出来的法，见CSS3DRenderer.js renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window

24、.innerHeight ); document.body.appendChild( renderer.domElement ); /添加鼠标，手势，窗口事件 document.addEventListener( mousedown, onDocumentMouseDown, false ); document.addEventListener( wheel, onDocumentMouseWheel, false ); document.addEventListener( touchstart, onDocumentTouchStart, false ); document.addEvent

25、Listener( touchmove, onDocumentTouchMove, false ); window.addEventListener( resize, onWindowResize, false ); function onWindowResize() /窗口缩放的时候，保证场景也跟随着一起缩放 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeigh

26、t ); function onDocumentMouseDown( event ) event.preventDefault(); /保证监听拖拽事件 document.addEventListener( mousemove, onDocumentMouseMove, false ); document.addEventListener( mouseup, onDocumentMouseUp, false ); function onDocumentMouseMove( event ) /鼠标的移动距离 currentEvent.movementX = currentEvent.screen

27、X - previousEvent.screenX var movementX = event.movementX | event.mozMovementX | event.webkitMovementX | 0; var movementY = event.movementY | event.mozMovementY | event.webkitMovementY | 0; lon -= movementX * 0.1; lat += movementY * 0.1; function onDocumentMouseUp( event ) /保证监听拖拽事件 document.removeE

28、ventListener( mousemove, onDocumentMouseMove ); document.removeEventListener( mouseup, onDocumentMouseUp ); function onDocumentMouseWheel( event ) /相机的视觉随着鼠标滚动的距离拉进或者远离 camera.fov += event.deltaY * 0.05; camera.updateProjectionMatrix(); function onDocumentTouchStart( event ) event.preventDefault();

29、/移动端没有movement，所以直接用touchX touchY去计算移动的距离 var touch = event.touches 0 ; touchX = touch.screenX; touchY = touch.screenY; function onDocumentTouchMove( event ) event.preventDefault(); var touch = event.touches 0 ; lon -= ( touch.screenX - touchX ) * 0.1; lat += ( touch.screenY - touchY ) * 0.1; touchX

30、 = touch.screenX; touchY = touch.screenY; /开启动画 function animate() requestAnimationFrame( animate ); lon += 0.1; lat = Math.max( - 85, Math.min( 85, lat ) ); phi = THREE.Math.degToRad( 90 - lat ); /角度转为弧度制 theta = THREE.Math.degToRad( lon ); /在球坐标系中算出相机的聚焦点的坐标 target.x = Math.sin( phi ) * Math.cos( theta ); target.y = Math.cos( phi ); target.z = Math.sin( phi ) * Math.sin( theta ); camera.lookAt(