前端如何实现webvr全景

1、方案调研

业务需要实现vr全景,类似于汽车之家,或者是贝壳看房之类的。经过技术调研,主流实现技术方案主要有3种:

1、threejs

threejs在3D流域的应用不用多说,但是最终实际效果不好、threejs的api多于繁杂等原因放弃。

2、css3D

没错,css也可以实现这些vr全景效果,考虑到兼容性以及实际体验,最终还是放弃了。

3、pano2vr或者krpano

经过实践,这些第三方软件做出的效果确实不错。而且发现许多网站,许多第三方vr公司都是用的这些技术。所以决定用第三方软件。

本文将基于krpano记录vr全景的使用过程。

2、krpano下载

很遗憾,krpano或者pano2vr都是收费软件。拿krpano来说,基础版本的199欧元,高级定制版本299欧元,还有一些好用的第三方插件也是收费的。虽然官网提供下载,但是也是体验版本或者是生成vr之后有他们自己的logo水印。

和我一样,囊中羞涩的同仁,那只好去网上搜索一下,想想其他办法(po jie ban)。

请支持正版软件!!

krpano官网地址:krpano.com - Download

3、全景图

做全景,想要达到比较好的效果,需要使用全景相机采集全景图片。采集完成的全景图片需要注意一个问题,那就是底部的相机痕迹。最好的解决方法就是用ps把底部相机的痕迹抹除。

如果没有全景图怎么办?

1、用手机的全景模式拍摄。

现在大部分手机支持全景拍摄。虽然效果肯定不如专业的全景相机,但是作为自己体验开发应该也可以用用。

2、网上下载6张单张图片。如下图所示:

 我来解释一下几个问题:

1、为什么是6张图片?而不是8张或者是10张。

首先,我们要有立体感。3D的东西我们可以看成是一个立方体。我们看的时候相当于站在这个立方体的中间,上,下,左,右,前,后这6个方向。所以必须是6张图片。

2、图片命名?

关于图片命名,可以看到上边的这些图,末尾分别是b、d、f、l、r、u这6个字母。这6个字母不是胡写的,而是分别对应其位置的英文首字母:上:up ;下:down ;左:left ;右:right ;前:front ;后:behind。

图片就准备好了。

4、使用krpano制作全景图

打开下载好的krpano文件夹,如下图所示:

大概可以说说krpano文件夹内这些主要文件(夹)的含义。

前三个文件夹,分别是krpano的文档、krpano的模板、krpano的例子。可以都点开看看,了解一下。

然后需要说的就是“krpano Tools.exe”。双击它,可以打开krpano的主程序界面。如何使用下边再说。

最后就是末尾的几个文件带有“droplet.bat”的文件。这些文件是生成全景图的自动脚本。下边介绍使用。

了解完文件夹,就可以开始生成全景图。

如何生成全景图?用鼠标拖拽着图片到这些命令上就可以了。就是这么简单。推荐使用倒数第二个命令来生成全景。如下图所示:

 最后生成一个vtour文件夹。如图所示:

 

 点击倒数第二个exe就可以在浏览器中看到自己的全景vr场景了。

请注意:不能直接打开 tour.html。必须把他们放进服务器中才可以打开。

至此,全景图已经制作完毕了。

5、krpano的二次开发

如果还是想增加一些自己的功能,就必须在其基础上做二次开发。

打开vtour文件夹中的tour.xml,它大概是这样的:

<krpano version="1.19" title="Virtual Tour">

	<include url="skin/vtourskin.xml" />

	<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
	<skin_settings maps="false"
	               maps_type="google"
	               maps_bing_api_key=""
	               maps_google_api_key=""
	               maps_zoombuttons="false"
	               gyro="true"
	               webvr="true"
	               webvr_gyro_keeplookingdirection="false"
	               webvr_prev_next_hotspots="true"
	               littleplanetintro="true"
	               title="true"
	               thumbs="true"
	               thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
	               thumbs_opened="false"
	               thumbs_text="false"
	               thumbs_dragging="true"
	               thumbs_onhoverscrolling="false"
	               thumbs_scrollbuttons="false"
	               thumbs_scrollindicator="false"
	               thumbs_loop="false"
	               tooltips_buttons="false"
	               tooltips_thumbs="false"
	               tooltips_hotspots="false"
	               tooltips_mapspots="false"
	               deeplinking="false"
	               loadscene_flags="MERGE"
	               loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
	               loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
	               loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"
	               loadingtext="loading..."
	               layout_width="100%"
	               layout_maxwidth="814"
	               controlbar_width="-24"
	               controlbar_height="40"
	               controlbar_offset="20"
	               controlbar_offset_closed="-40"
	               controlbar_overlap.no-fractionalscaling="10"
	               controlbar_overlap.fractionalscaling="0"
	               design_skin_images="vtourskin.png"
	               design_bgcolor="0x2D3E50"
	               design_bgalpha="0.8"
	               design_bgborder="0"
	               design_bgroundedge="1"
	               design_bgshadow="0 4 10 0x000000 0.3"
	               design_thumbborder_bgborder="3 0xFFFFFF 1.0"
	               design_thumbborder_padding="2"
	               design_thumbborder_bgroundedge="0"
	               design_text_css="color:#FFFFFF; font-family:Arial;"
	               design_text_shadow="1"
	               />

......

我们所有二次开发的代码基本都在这个文件中写入。

1、增加热点

两种方式:

第一,如果增加热点的目的只是想画一个箭头切换一下场景,那么只需要打开"krpano Tools.exe",打开软件主界面,点击左上方按钮“load xml”,载入vtour文件夹中的tour.xml文件就可以在软件中看到刚刚制作的场景了,如下图:

 载入场景之后,可以点击第三个按钮“Add hotspot”。这时候你可以在你想要添加热点的地方点击一下,可以生成一个箭头,用鼠标拖拽调整好位置,再点击一下热点,会弹出一个弹框,你可以再下拉框中选择点击这个热点之后将到达的场景名称。如图所示:

 最后记得点击保存。

第二,可以通过代码写入热点。话不多说,直接上代码:


        <hotspot name="mytext1"
        type="text"
        zoom="true"
        ath="4.642" atv="24.049" edge="center"
        distorted="true"
        renderer="webgl"
        html="[span]DMI[/span]"
        css="font-family:Arial; font-size:14px; color:#fff;"
        vcenter="false"
        padding="5"
        wordwrap="true"
        bg="true"
        bgcolor="0x000000"
        bgalpha="0.6"
        bgborder="0"
        bgroundedge="0"
        bgshadow=""
        txtshadow=""
        mergedalpha="true"
        oversampling="1.0"
        mipmapping="false"
        onautosized=""
        onover="tween(alpha,1);tween(scale,0.9);"
        onout="tween(alpha,1);tween(scale,1);"
        onclick="action(open,container1);"
        />

就是类似于html的一个标签hotspot。至于里边的属性如下,可以参考:

<layer name="..."        定义引入的元素名称
       type="image"       引入元素的类型,可以为image、container、text(textfield),container为容器,可在容器内继续引入多个媒体元素
       url="..."          引入元素的路径(支持格式:SWF, JPG, PNG, GIF.)
       html=""				显示文字时的内容
       keep="false"       是否在跳入新场景时仍然保留显示该元素
       parent=""          设置父容器名称,可以直接是 plugin的name,也可以是全称:parent="layer[name]"或parent="hotspot[name]"
       alturl=""          #引入元素的路径(支持格式:SWF, JPG, PNG, GIF.),只在html5浏览器使用
       devices="all"      设置显示的设备类型(详见设备列表)
       visible="true"     设置插入元素是否可见
       enabled="true"     设置插入元素是否接受鼠标事件
       handcursor="true"  鼠标移动该元素上时,是否变为小手
       maskchildren="false"  设置是否将子控件变为蒙板,设置为TRUE后,除子控件范围显示外,子控件边框与父控件边框之间区域将不显示
       scalechildren="false" 设置是否子空间跟随父控件一同缩放
       zorder=""              插入元素的次序索引,可以是字符也可以是数字,html5输出必须是0-100整数
       capture="true"		只是该元素接受事件,false时子元素也可接受事件
       children="true"    启用当前元素的子元素来接收鼠标事件。
       preload="false"	预加载,在加载pano之前先加载图层/插件的url,然后执行任何操作。
       blendmode="normal" 混合/混合模式( normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert)仅flash
       style=""               调用已在文件中定义好的style的名称
       align=""               元素在屏幕对齐方式,lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom (见示意图)
       edge=""                元素的边缘或描点层对齐方式,lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom (见示意图)
       x=""                   对齐边界到对齐点的X横向距离
       y=""                   对齐边界到对齐点的y横向距离
       ox=""				偏移
       oy=""				偏移
       rotate="0.0"           插入元素显示时旋转度数
       width=""               插入元素的显示宽度(prop:自适应)
       height=""              插入元素的显示高度
       minwidth="0"
		maxwidth="0"
		minheight="0"
		maxheight="0"
        autowidth="false"  根据内容自适应宽度
        autoheight="false" 根据内容自适应高度
       scale="1.0"            插入元素的缩放比例
       pixelhittest="false"   仅flash
       smoothing="true"   平滑  仅flash
       accuracy="0"         精度
       alpha="1.0"            插入元素的不透明度
       autoalpha="false"   自动透明度
       usecontentsize="false"  满画布  仅flash
       scale9grid=""    定义9格网格(scale9grid="x-position|y-position|width|height|prescale*")
       crop=""                定义元素坐标及宽高  crop="x-position|y-position|width|height"
       onovercrop=""          设置元素鼠标移到上方后的坐标及宽高
       ondowncrop=""          设置元素鼠标按下状态后的坐标及宽高
       mask=""    遮罩  仅flash
       effect=""    位图效果适用于层/插件的形象     仅flash
       background=""  可以设置false 去掉背景
       bgcolor="0x000000"      type="container"状态下的背景颜色,非container状态下无效
       bgalpha="0.0"           背景不透明度
       bgborder="0"       (bgborder="widths color alpha")边框
       bgroundedge="0"   圆角
       bgshadow=""     (基本:bgshadow="xoffset yoffset blur color alpha";高级:gshadow="xoffset yoffset blur spread color alpha inset, ...")阴影
       bgcapture="false"       是否捕抓在背景容器上事件(type="container"状态下生效)
       onover=""               鼠标在经过上方时执行动作
       onhover=""              鼠标停在上方时执行动作
       onout=""                鼠标停移出范围时时执行动作
       onclick=""              鼠标停点击时执行动作
       ondown=""               鼠标按下时执行动作
       onup=""                 鼠标按键松开时执行动作
       onloaded=""             加载元素完成后执行动作
       />

2、增加热点点击事件

增加点击事件,比如点击热点之后弹出一个图片:

<!-- 定义一个动作 -->
<!-- 打开关闭图片 -->
<action name="open">
<!-- 这个语法的意思就是把第一个参数的visible(显示)设置为true -->
set(plugin[%1].visible,true);
tween(plugin[%1].alpha,1);
</action>
        
<action name="close">
set(plugin[%1].visible,false);
</action>

 <hotspot name="mytext1"
        type="text"
        zoom="true"
        ath="4.642" atv="24.049" edge="center"
        distorted="true"
        renderer="webgl"
        html="[span]DMI[/span]"
        css="font-family:Arial; font-size:14px; color:#fff;"
        vcenter="false"
        padding="5"
        wordwrap="true"
        bg="true"
        bgcolor="0x000000"
        bgalpha="0.6"
        bgborder="0"
        bgroundedge="0"
        bgshadow=""
        txtshadow=""
        mergedalpha="true"
        oversampling="1.0"
        mipmapping="false"
        onautosized=""
        onover="tween(alpha,1);tween(scale,0.9);"
        onout="tween(alpha,1);tween(scale,1);"
        onclick="action(open,container1);"
        />

        <!-- 司机室右侧面板上ATP旋转开关 -->
        <hotspot name="mytext2"
        type="text"
        zoom="true"
        ath="99.563" atv="34.140" edge="center"
        ......

        onclick="action(open,container2);"这里声明点击的动作 其中container2 是下边图片图层的名字
        />


        <layer
        name="container2"
        type="image"      定义图片图层
        url="图片的地址"
        width="100%"
        height="100%"
        maskchildren="true"
        visible="0"
        children="true"
        background="true" 
        bgcapture="true" 
        enabled="true"
        bgcolor="0x000000" 
        bgalpha="0.8"
        onclick="action(close,get(name));"  // 点击这个图片就可以隐藏图片
        >

由于krpano的功能很多,又有一些属于自己的语法,二次开发的内容就暂时到此结束了。

在网上找到了一个整理好的krpano中文文档,地址:plugin/layer · Krpano全景漫游开发手册 · 看云

  • 7
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现720全景,可以使用JavaScript(JS)结合WebGL来创建一个交互式的全景体验。 首先,需要了解WebGL是一种基于OpenGL的JavaScript API,用于在浏览器中渲染3D和2D图形。通过使用WebGL,可以操作顶点,贴图和着色器来创建特定的图形效果。 实现720全景的步骤如下: 1. 获取全景图像:首先需要获取用于全景展示的图像。全景图像应该是一个无缝连接的圆柱形投影图像。 2. 创建HTML元素:使用HTML和CSS创建一个容器元素来展示全景图像。可以使用一个div元素,设置宽度和高度以适应全景图像的尺寸。 3. 加载WebGL库:在HTML文件中引入WebGL库,例如Three.js或Babylon.js。这些库提供了一些简化的函数和方法,使得创建和操作3D场景更加容易。 4. 创建场景和摄像机:使用WebGL库创建一个3D场景,并在场景中添加一个摄像机。摄像机的位置应该在全景图像的中心。 5. 创建渲染器:使用WebGL库创建一个渲染器,并将其连接到容器元素中。 6. 加载全景图像:使用WebGL库加载全景图像,并将其应用到场景的球体上。球体的半径应该与容器元素的宽度和高度相匹配。 7. 添加交互功能:通过添加监听器和事件处理程序,可以允许用户在全景图像上进行交互,例如拖动或缩放来改变视角。 8. 渲染场景:使用渲染器和摄像机,将场景渲染到容器元素中。通过循环调用渲染函数来实现每一帧的渲染。 通过以上步骤,即可实现基本的720全景,用户可以使用鼠标或手势在全景图像中进行导航和交互。 需要注意的是,实现720全景可能涉及复杂的数学计算和图形处理,所以理解基本的JavaScript和WebGL编程是必要的。同时,也可以参考各种在线教程和文档,以获取更详细的指导和示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值