http://www.digitaltwin.tv/

基于HTML5的全景图展示

摘  要: 全景图是连年呈现的一种新的交互式的虚拟场景暗示方法,可以用相应的欣赏器实现虚拟场景的周游,具有很好的真实感和陶醉感。具体先容了一种基于HTML5的全景图欣赏器的实现道理,并给出了要害的HTML5代码。最终取得了精采的展示结果。
要害词: 全景图;展示;HTML5

全景图(Panorama)即用相机360°拍摄一组照片,然后用专业软件拼接成一个全景图像,通过计较机技能实现全方位互动式寓目标真实场景还原展示方法。Apple公司推出的QuickTime VR第一次向公共展示了全景图像技能的视觉魅力。该系统回收与传统基于图形的建模进程截然差异的思路,操作图像或持续的视频为原始数据,颠末处理惩罚形玉成景图像,然后通过符合的空间模子将多幅图像组织成虚拟全景空间。连年来,基于全景图像的虚拟现实技能也获得了迅速成长,被遍及用于数字博物馆、虚拟旅游、房地产展示等虚拟周游应用规模[1]。
    全景图的建造流程包罗全景图像收罗、图像拼接以及全景图展示欣赏3个步调。今朝,拼接完成后的全景图展示欣赏凡是操作非凡的播放软件(如Java、Quicktime、Flash)来体验它所提供的虚拟情况,若要宣布到Internet,则需要在欣赏器中插手这些措施的Plug-in措施[1-2]。可是以Plug-in形式运行的这些措施,存在严重的安详隐患和机能不佳等缺点。
    HTML5是最新的Web尺度,具有许多令人感动的新特性,其顶用于绘画的Canvas元素为网页画图及图像处理惩罚带来了很大的便捷。HTML5于2008年发布了一个草案,今朝尚处于不绝完善阶段。固然速度迟钝,但对付互联网Web开拓尺度来说是一个庞大的奔腾。HTML5并非仅仅用于暗示Web内容,在此平台上,视频、音频、图像、动画以及与设备的交互都将被尺度化,办理了HTML4在Web应用成果上的欠缺。HTML5拥有全新的、更公道的tag,多媒体工具不在其他工具和embedtag中,而是有独立的音/视频tag,使Web向富媒体趋势成长;HTML5中的Canvas可以离开Flash和Silverlight、Java Applet插件提供富动画,直接在欣赏器显示图形或动画;HTML5提供了API接口,可以实现欣赏器内编辑、拖放以及各类图形用户界面的本领;HTML5将利用CSS来泛起内容。跟着HTML5的愈加成熟,今朝新版本的欣赏器如 Chrome、Firefox、Safari、Internet Explorer以及 Opera都已经支持了HTML5的某些特性,甚至此刻的智能终端上的欣赏器如UC欣赏器、OperaHD等也开始支持HTML5[3-4]。
1 全景图欣赏措施的设计思路
    本文将回收HTML5措施实现全景图的欣赏,直接嵌入到网页中,通过Web方法供用户欣赏。设计进程分为以下3个步调:
    (1)获取数码照片。在场景中央将数码相机放于三角架上,调理三角架上的两个程度仪,使相灵活弹360°时大抵保持在同一程度面上,每旋转必然角度拍摄一张照片,共拍摄15~20张照片。假如利用鱼眼镜头照相,则只需要5张。图1所示为在某集会会议室内获取的照片。

基于HTML5的全景图展示

(2)拼接全景图。将步调(1)获取的照片导入到专业全景图拼接东西PTGui中,生成一幅全景图,如图2所示,详细步调参考辅佐文档。再利用Pano2VR转换为6张立方面子片,图3所示别离是后、右、前、左、上、下偏向的图片。

基于HTML5的全景图展示

(3)全景图展示。操作文本编辑器东西编写相应的展示全景图的js措施,嵌入到网页中,结果截图见图4,措施的要害代码见下一节。

基于HTML5的全景图展示

 

2 全景欣赏器的HTML5实现
    Three.js是著名的轻量级Javascript 3D引擎,基于HTML5开拓,可用于建设各类三维场景,包罗了摄影机、光影、气势气魄、材质等各类工具。使开拓者可以轻松地开拓巨大的三维场景。AlteredQualia是Three.js的主要代码孝敬者之一。本文将操作Three.js来实现对全景图的展示。
    (1)引用Three.js。
    <script src=http://www.chinaaet.com/article/206747/"./js/Three.js"></script>
    (2)建设场景、摄像机、画布等基本元素,部门代码如下:
    var container, mesh;
    container = document.getElementById( 'container' );
    camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 1, 1100 );
    scene = new THREE.Scene();
    scene.add( camera );
    texture_placeholder = document.createElement( 'canvas' );
    texture_placeholder.width = 128;
    texture_placeholder.height = 128;
    var context = texture_placeholder.getContext( '2d' );
    context.fillStyle = 'rgb( 200, 200, 200 )';
    context.fillRect( 0, 0, texture_placeholder.width,
texture_placeholder.height );
    (3)创成立方体网格模子、渲染器。并把全景图片加载到网格模子上,然后再把网格模子放加入景中。实现了渲染函数,当鼠标等事件触发后,就要挪用这个函数来调解摄像机和渲染场景。
    var materials = [
        loadTexture( 'px.jpg' ), // right
        loadTexture( 'nx.jpg' ), // left
        loadTexture( 'py.jpg' ), // top
        loadTexture( 'ny.jpg' ), // bottom
        loadTexture( 'pz.jpg' ), // back
        loadTexture( 'nz.jpg' )  // front
    ];
    mesh = new THREE.Mesh(new THREE.CubeGeometry
(300, 300, 300, 7, 7, 7, materials),
new THREE.MeshFaceMaterial() );
    mesh.scale.x = - 1;
    scene.add(mesh);
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild( renderer.domElement);

    function loadTexture( path ) {
        var texture = new THREE.Texture(texture_placeholder);
        var material = new THREE.MeshBasicMaterial
( { map: texture, overdraw: true } );
        var image = new Image();
        image.onload = function () {
            texture.needsUpdate = true;
            material.map.image = this;
            render();
        };
        image.src = path;
        return material;
    }
    function render() {
        lat = Math.max( - 85, Math.min( 85, lat ) );
        phi = ( 90 - lat ) * Math.PI / 180;
        theta = lon * Math.PI / 180;
        target.x = 500 * Math.sin( phi ) * Math.cos(theta);
        target.y = 500 * Math.cos( phi );
        target.z = 500 * Math.sin( phi ) * Math.sin(theta);
        camera.lookAt( target );
        renderer.render( scene, camera );
    }
    (4)添加鼠标操控事件。措施代码如下:
    document.addEventListener( 'mousedown',
onDocumentMouseDown, false );
    document.addEventListener( 'mousemove',
onDocumentMouseMove, false );
    document.addEventListener( 'mouseup',
onDocumentMouseUp, false );

    function onDocumentMouseDown( event ) {
        event.preventDefault();
        isUserInteracting = true;
        onPointerDownPointerX = event.clientX;
        onPointerDownPointerY = event.clientY;
        onPointerDownLon = lon;
        onPointerDownLat = lat;
    }
    function onDocumentMouseMove( event ) {
        if ( isUserInteracting ) {
            lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
            lat = ( event.clientY - onPointerDownPointerY )
* 0.1 + onPointerDownLat;
            render();
        }
    }
    function onDocumentMouseUp( event ) {
        isUserInteracting = false;
        render();
    }
    本文先容了HTML5和基于HTML5的Three.js 3D引擎,提出了基于HTML5举办全景图像展示的设计思路及详细实现。实践证明,该要领展示交互结果精采。HTML5作为下一代HTML尺度,将会带来更多的惊喜。
参考文献
[1] 邓杏杏,朱大明,杨袁聪.基于全景图的虚拟现实系统研究与探讨[J].地矿测绘,2009,25(1):26-28.
[2] 宋利,周源华,周军.一种全景图欣赏器的JAVA实现算法[J].计较机应用与软件,2003,20(12):1-2.
[3] SHWETANK D.Taking your Web apps offline:a tale of  Web storage,application cache and Web SQL[EB/OL]. (2011-03-22).http://dev.opera.corn/article/view/takingyou-Web-apps-offline- Web-Storage-appache-Websql/.
[4] CHRIS M,BRUCE L.New structural elements in HTML5  [EB/OL].(2010-12-21)[2011-04-15].http://dev.opera.com/artic1es/view/new-structural-elements-in.html5/.

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。