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

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

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

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

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

5、示；展品及展览内容以图层线框进行点击弹出展示功能 支持图文展示； 支持音频介绍；4) 数据保护和加密 为了保护原始数据的安全，避免原始数据直接在网上泄露、传播，项目承接方对原始数据进行加密保护，使得用户无法在本系统外直接使用。 项目承接方提交所有原始数据交由馆方保存，不得保留备份。三、 项目实施 全景漫游是指在由全景图像构建的全景空间里进行切换，达到浏览各个不同场景的目的。全景漫游系统的实现是需要相应的硬件和软件的结合。首先需要相机和鱼眼镜头、云台、三角架等硬件来拍摄出鱼眼照片，然后使用全景拼接软件把拍摄的照片拼合，发布成可以播放和浏览的格式。具体制作过程和技术路线如下： 现场实景图像采集生成

6、鱼眼图渲染技术利用凭接软件制作球状 360全景图特效技术处理配置热点制作程序开发全景系统实景场景实景图对图像进行拼接的技巧设计。利用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) 画面

8、中前后左右的构图要美观，具有一定的艺术性。内容要丰富，主题要求完整、空出亮点、体现细节。图片色彩鲜明，不存在色调单一的情况，但特殊场景除外，如：雪景。3) 需要突出的部分，光线最好是侧光或者顺侧光，这样层次丰富立体感强烈，可以突出主体。4) 升高三脚架拍摄，可以的话可以采用高杆拍摄。5) 尽量找高位拍摄，画面上既可以俯览也可以仰望，使得画面更大气。 - 在拍摄全景的时候，都是以一个点作为中心，360 度拍摄，所以不能在高位拍摄。3.26 拍摄时间要求 收集待采集区域的天气情况，结合采集计划，合理安排实采计；建议拍摄时间段：除特殊景色外，如：日出、晚霞；1) 正常天气，春夏采集时间段约为：白景

9、9：00-18：30。 2) 正常天气，秋冬采集时间段约为：白景 9：30-16：30。 3) 天气要求：天气需晴好，能见度需在 8KM 以上，风力/定义相机，场景，渲染器，是 3D 场景形成的三大要素var camera, scene, renderer;/定义几何体，材质，以及几何体加材质之后形成的网格var geometry, material, mesh;/生成三维向量（0,0,0），相机的目标点var target = new THREE.Vector3();/lon 经度 竖着的 有东经 西经 ；lat 维度 横着的 有南纬 北纬/该经纬表示相机的聚焦点，初始状态在前面var lo

10、n = 90, lat = 0;/同样是相机的聚焦点，上面是角度，此处转化为弧度制var phi = 0, theta = 0;/移动端用户输入的 x，y var touchX, touchY;init();animate();function init() /相机的默认位置在坐标系的原点camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );scene = new THREE.Scene();/右手坐标系，z 朝向观察者，即相机。下面是将六个面拼接成立方体，分别对应

11、var sides = url: res/Bridge2/posx.jpg, /左侧position: -512, 0, 0 ,rotation: 0, Math.PI / 2, 0 ,url: res/Bridge2/negx.jpg, /右侧position: 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:

12、0, -512, 0 ,rotation: -Math.PI / 2, 0, Math.PI ,url: res/Bridge2/posz.jpg, /前position: 0, 0, 512 ,rotation: 0, Math.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

13、( img );element.width = 1026; / 2 pixels extra to close the gap.element.src = side.url;/CSS3DObject 是拓展出去的方法，原型是 object3D，见CSS3DRenderer.jsvar object = new THREE.CSS3DObject( element );object.position.fromArray( side.position );object.rotation.fromArray( side.rotation );scene.add( object );/渲染器也是拓展出

14、来的方法，见 CSS3DRenderer.jsrenderer = new THREE.CSS3DRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );/添加鼠标，手势，窗口事件document.addEventListener( mousedown, onDocumentMouseDown, false );document.addEventListener( wheel, onDocumentMouseWhee

15、l, false );document.addEventListener( touchstart, onDocumentTouchStart, false );document.addEventListener( touchmove, onDocumentTouchMove, false );window.addEventListener( resize, onWindowResize, false );function onWindowResize() /窗口缩放的时候，保证场景也跟随着一起缩放camera.aspect = window.innerWidth / window.innerH

16、eight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );function onDocumentMouseDown( event ) event.preventDefault();/保证监听拖拽事件document.addEventListener( mousemove, onDocumentMouseMove, false );document.addEventListener( mouseup, onDocumentMouseUp, false );func

17、tion onDocumentMouseMove( event ) /鼠标的移动距离 currentEvent.movementX = currentEvent.screenX - previousEvent.screenXvar movementX = event.movementX | event.mozMovementX | event.webkitMovementX | 0;var movementY = event.movementY | event.mozMovementY | event.webkitMovementY | 0;lon -= movementX * 0.1;lat

18、 += movementY * 0.1;function onDocumentMouseUp( event ) /保证监听拖拽事件document.removeEventListener( mousemove, onDocumentMouseMove );document.removeEventListener( mouseup, onDocumentMouseUp );function onDocumentMouseWheel( event ) /相机的视觉随着鼠标滚动的距离拉进或者远离camera.fov += event.deltaY * 0.05;camera.updateProjec

19、tionMatrix();function onDocumentTouchStart( event ) event.preventDefault();/移动端没有 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.s

20、creenX - touchX ) * 0.1;lat += ( touch.screenY - touchY ) * 0.1;touchX = 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( target );renderer.render( scene, camera );四、 项目进度表 五、 项目人员安排