全景漫游制作基础教程

以《VR教育资源快速开发与应用》慕课为例 深圳职业技术学院 陈锐浩

目录CONTENTS

全景景相关知识

全景图拍摄拼接

全景漫游制作

全景浏览与总结

01

02

03

05

环物的制作04

PART

全景相关知识

01

全景图介绍

• 全景图，即通过专业相机捕捉整个场景的图像信息或者使用建模软件渲染过后的图片，包

括球型全景，六面体全景，柱形全景，现在流行球型全景，覆盖水平360度，垂直180度，

图片宽高比为 2：1。

• 全景图浏览软件：DevalVR playerU

全景的原理

全景漫游的特点

数字三维全景和以往的数字建模形式相比，其优势主要体现在以下几方面：

1. 真实感强，基于对真实图片的制作生成，相比其他建模生成对象更真实可信。

2. 比平面图片能比能表达更多的图像信息，并可以任意控制，交互性能好。

3. 经过对图像的透视处理模拟真实三维实景，沉浸感强烈，给观赏者带来身临其境的感觉。

4. 生成方便，制作周期短，制作成本低。

5. 文件小，传输方便，适合网络使用，发布格式多样，适合各种形式的应用。

全景案例

深职院图书馆广东改革开放40周年网上展馆

PART

全景拍摄

02

流程介绍

图片拍摄 合成全景图 生成全景漫游 发布全景内容

全景拍摄-普通手机

实操：

1、手机市场上下载安装 “转转鸟”应用，提高手机全景拍摄功能。

2、采用QQ群中的谷歌相机软件“CameraApp.apk”。

全景拍摄-全景相机

• Ricoh/理光Theta全景数码相机

两个180度鱼眼镜头，可以拍摄图片和视频，通过wifi，用手机控制，拍摄完，图片和视频传输到关

联的手机中。

Theta S 全景拍摄说明

1. 安装智能手机APP

2. 手机通过wifi连接相机

3. 通过手机控制相机进行拍摄，

可以拍摄全景图或全景视频。

4. 通过手机预览，或者传出到

PC上面。

5. 全景视频合成，采用软件。

演示采用理光ThetaS如何拍摄全景

让老师门安装一下，实验一下拍摄全景

全景拍摄-专业设备

专业单反相机、三脚架、全景云台、鱼眼镜头、无线遥控器(快门)

鱼眼镜头

鱼眼镜头是一种焦距为16mm或更短的并且

视角接近或等于180°的镜头。 它是一种极端

的广角镜头，“鱼眼镜头”是它的俗称。为使

镜头达到最大的摄影视角，这种摄影镜头的前

镜片直径很短且呈抛物状向镜头前部凸出，与

鱼的眼睛颇为相似，“鱼眼镜头”因此而得名。

EF 8-15mm f/4L USM鱼眼镜头

全景拍摄注意点

1. 三脚架要买好一些的，因为相机和云台有重量。

2. 推荐采用鱼眼镜头，因为它焦距短，每张单张照片拍摄到较大的视角范围，从而以较少的

照片拼接成一个360度全景图。 8mm鱼眼镜头不用俯仰，16mm镜头就要加补天地。

3. 镜头焦距越长，画质越好，整图放大倍率越大，同时拍摄张数也就越多，后期难度也就越

大。5D2加15mm，在拍摄效率和画质的满意度上达到一个很好的“质效比”。

4. 采用无线快门，这样可以防止抖动，也防止人靠太近，给拍进去，特别是拍天和地的时候。

360度全景拍摄

• 完整拼接球形全景所需要图片的数量由镜头

的可视角度决定。鱼眼镜头可视角度比较广，

在现实拍摄中一般采用鱼眼镜头。在后期的

合成中相邻两张图片一般需要有1/3的重合部

分，保证有足够的重合信息点。

• 拍摄时候，大部分全景云台都是把相机竖起

来的。所以要掌握镜头竖拍的角度。

• 非全画幅相机采用全画幅相机镜头，相应的

焦距要发生改变。

• 各焦距镜头一圈拍摄张数速查表（全画幅）

如右图。

云台的作用

保证镜头的光学中心（节点）在转动拍摄场

景时，始终保持在同一个位置。

• 镜头的节点（ Nodal Point）是指照镜头的光

学中心点，穿过此点的光线不会发生折射。在

拍摄全景照片的每一次转动，都必须以镜头的

节点为轴，才能保证相邻拼接的两张照片重叠

部位的远近景没有位移变化，这样才能保证全

景拼接的完美无痕。

• 近景，节点要精准；远景，节点可放宽甚至可

忽略。

拍摄步骤

第一步：调整好云台，把相机固定上去。

第二步：相机设置，确定光圈和感光度，光圈一般为F8.0 ，户外也可

为F11，感光度统一设置为100（感光度越低画质越细腻），白平衡

（AWB）。

第三步：测光，把相机调到 自动挡 AV(光圈优先), 在拍摄点绕一圈，

测各点快门速度，然后取一个平均值。把相机调整到M（手动）档。

第四步：对焦，镜头调到AF档，对准旁边物体，对一下焦，然后再把镜

头调到M档（超焦距，实现大景深, 将镜头上的AF切换为MF，这样操作

之后，焦点就被锁定了）。

第五步：开始拍摄，每60度拍摄一张，再拍一张天空，两张地面。

拍摄设备

相机：佳能5D2

镜头：适马15mm定焦镜头

云台：南迦巴瓦

其他：三脚架、无线快门

以某个点为中心进行水平360度和

垂直180度拍摄，步骤如下：

全景合成

合成软件：PTGui

掌握技能：

• PTGui的安装

• PTGui的使用--使用三部曲

• PTGui的使用--蒙版工具

• PTGui的使用--控制点介绍

• PTGui的使用--优化器介绍

• PTGui的使用--预览设置

PTGui的使用--使用三部曲

1 加载图片，把拍摄好的图片导入软件，选中后直接拖入窗口。 2 对准图像，进行编辑。 3 创建全景图

蒙版工具的使用

在PTGUI进行全景照片合成，通过在相邻照

片之间使用蒙版功能，利用图片的重叠，可以擦

除不清晰或不需要的内容。

步骤一：合成拼接好全景后，点选蒙版选项，

选取需要使用蒙版功能的相邻照片

步骤二：点选画面下方的红色与画笔按钮。

步骤三：在左右2侧图片中找到相同位置，选

出要擦除的区域开始擦除

控制点是指在两个重叠图片上的匹配

点。对于每一重叠图像最少提供三个控制

点。如左图，相同数字表示同一匹配点。

理论上越多的控制点就可以更好的实

现精准拼接，默认设置中控制点数默认是

15个，可以根据需要自己设置。

如果拼接不成功，就需要手动添加控

制点。

控制点管理

利用优化器可以提高图片拼接的精度。

拍摄时候如果镜头节点存在错位情况，

利用“视点”优化，可以最大限度的弥补

失误。

优化器介绍

全景图预览

设置预览工具：工具 - 选项 - 查看器

PART

全景漫游制作

03

漫游作品制作

掌握内容• 全景漫游后期制作工具介绍

• krPano介绍

• krPano安装使用

• 利用krPano制作全景

• 生成项目结构介绍

• 利用krpano Tools.exe编辑全景漫游作品

• krPano xml语法基础

• krPano小技巧介绍

• krPano插件应用

全景漫游的技术路线

1. 基于全景图像构建的虚拟空间的漫游

2. 基于三维几何模型构建的虚拟空间的漫游

基于几何模型漫游的应用

基于图片全景漫游的应用

1. 旅游行业

2. 房地产行业

3. 展览

4. 教育行业

• 校园风光展示、重点实验室、校园文化

• 数字博物馆网上虚拟现实展示

• 建筑学院、设计学院进行虚拟现实教学中使用

• 旅游学院教学种虚拟旅游的使用

• 虚拟现实实验室的构建及地理信息系统应用

全景漫游后期制作工具介绍

• 中文版桌面处理软件：杰图的漫游大师，pano2vr， Kolor Panotour Pro （基于krPano的可视化编

辑软件）

• 主流软件：krpano ，质量好，速度快，兼容性好，目前最新版本是 krPano1.19 pr16, 支持VR

• 基于krpano二次开发的界面软件：krpanoGUI，全景漫游专家，全景大师，全景坊，全景生成精灵等。

• 目前主流的在线全景平台几乎都是基于krPano内核的，如全景客，720云等。

• 学习资料：http://www.chinavr.net/ http://www.krpano360.con

Pano2VR全景漫游制作

Pano2VR全景漫游制作

第一节：Pano2VR基本操作

• Pano2VR是什么

• 如何获取Pano2VR

• Pano2VR6.0界面介绍

• 输入全景图

• 输出全景漫游作品

Pano2VR全景漫游制作

• Pano2VR是一个优秀的全景漫游制作软件。它能将全景图片转化生成全景漫游系统。

Pano2VR，本身就是基于自己内核的界面化软件，不需要编程，界面十分友好，适合没

有基础的学习者。

它在版本5之前，曾受到过追捧，但由于在移动设备的支持方面存在问题，很多人转而投

向了krPano工具。不过在版本5之后，Pano2VR在功能和优化上都有着极大的提升。

Pano2VR全景漫游制作

• 如何获取Pano2VR

通过官网下载 通过搜索引擎下载

Pano2VR全景漫游制作

• Pano2VR6.0界面介绍

顶部的菜单工具栏

底部的导览浏览器

输入的参数设置区

输出的参数设置区

全景预览窗口

Pano2VR全景漫游制作

• 输入全家图：

Pano2VR是将全景图制作生成成全景漫游，因此输入Pano2VR的首先是全景图片，并且

通常是球星全景图片。

输入全景图一般有两种途径：

第一种：通过“输入”按钮，选择全景图片输入

第二种：直接拖入，点击鼠标直接将全景图拖入预览窗口或导览浏览器中

Pano2VR全景漫游制作

• 输出全景漫游作品

在头部菜单选择“输出”按钮在主界面右边，点击“＋”即可选择输出。点击“＋”后

我们注意到，会出现很多选项供我们选择，一般我们选择Html5就可以。

在下面的输出文件夹选项，我们可以设置输出作品的路径。

选择一种皮肤，如“simplex_v6.ggsk”，然后点输出栏目的第一个图标，就可以全景漫

游作品并预览。

以上就是Pano2VR的基本操作，只要你有全景图，不到一分钟，你就能生成一个全景漫游

作品。

第二节：Pano2VR中添加音乐

两种方式

• 第一种，简单的设置场景背景音乐

• 第二种，在场景中“嵌入”背景音乐

第三节：Pano2VR中添加热点

热点的类型

• 网址：点击打开网站地址

• 导览节点：点击在不同场景中切换

• 图像：点击打开图片

• 视频：点击播放视频

• 信息：点击弹出文本窗口

KrPano全景漫游制作

krPano介绍

krPano是一款全景漫游制作软件和工具。用krpano所生成的全景，在兼容性、功能性、互动性方

面的表现都很不错，而且可以二次开发并拥有自己的编程语言，比如使用专用的krPano xml代码编写全

景漫游，可开发出高度定制化的项目。因此，目前主流的全景网站均是在krPano全景的基础上进行开发，

并不断进行更新迭代，形成自己独有的全景内容服务。

krPano有如下特点：

1、高度灵活、性能卓越的轻量化全景漫游浏览器；

2、兼容HTML5和Flash，支持WebGL下的WebVR展示；

3、使用专用的krPano xml代码编写全景漫游，可开发出高度定制化的项目，也可利用krpano工具

开发在线全景制作及展示平台；

4、支持多种类型的全景图及全景视频和环物全景；

5、同时提供简单高效的批处理方式，可在无需代码干预下迅速生成一个基本功能兼备的全景漫游

项目。

krPano安装及注册

第一步：获取软件

打开 https://krpano.com/ ，进入 “Download”栏目，当前的最新版本为：krpano 1.19-pr16

软件支持Windows系统，Mac 系统，Linux系统。

选择适合自己操作系统的版本下载。

krPano安装及注册

第二步：购买正版授权

• 在官网首页，直接进入“buy”栏目，有三个选项，第一个是krpano的基础内核，购买了这个，你的

krPano项目在各种设备，包括手机浏览都没有问题。第二个是地图插件，目前仅限于谷歌地图和必

应地图，购买意义不大。第三个是去除右键菜单中krpano版权信息（也可以完全屏蔽右键菜单）。

一般我们只需要购买“krpano基础授权”就可以了。

• 选择需要购买的内容之后选择“buy now” 按钮进入支付界面。

支付完毕之后，对方会把软件授权码发到你的注册信箱中，然后你就可以开始全景开发之旅了。

krPano安装及注册

第三步：注册使用

krPano软件提供两个版本，一个是安装版本，一个是解压版本。一般直接下载压缩版本就可以，解

压之后直接就可以用。双击运行 “krpano Tools.exe”， 选择 “Register now”,然后新窗口中输入

注册码。

krPano安装使用

• 运行“krpano Tools.exe”

• 选择“Register now”,然后新窗口中输入注册码

批处理程序介绍

程序 程序说明

MAKE PANO FLAT droplet.bat 单张平面图片

MAKE PANO MULTIRES droplet.bat 单张图片分层全景

MAKE PANO NORMAL droplet.bat 单张图片不分层全景

MAKE VTOUR MULTIRES droplet.bat 多张图片分层全景漫游

MAKE VTOUR NORMAL droplet.bat 多张图片不分层全景漫游

MAKE VTOUR (VR-OPT) droplet.bat 多张图片分层全景漫游，VR优化

krPano生成全景漫游基本操作

1、选中要生成漫游作品的全景图片

2、把选中的图片拖放到批处理程序上面

3、松开鼠标，启动生成过程

4、启动测试服务器进行作品预览

利用krPano制作全景

没错，就是这么简单，把右边窗口的图片全选，鼠标按住，拖到左边的批处理程序上面就可

以了，正确的话，当鼠标移动到程序的上面，会出现“+”号图标。然后松开鼠标就可以了。

生成项目结构介绍

利用krPano Tools.exe编辑全景漫游作品

主要功能说明：

Load tour.xml

加载全景作品进行编辑

Set as startup view

设置进入的初始视角

Add hotspot

添加场景切换的热点

Edit hotspots

编辑热点

Edit tour.xml

编辑配置文件

Save tour.xml

保存配置文件

krPano xml语法基础

• 主要的代码都存放在tour.xml文件• tour.xml文件由若干xml元素组成，xml元素也叫做xml节点或xml标签。例如action元素也可叫做

action标签。• 每个标签的名字由一对单括号<>包围。• 每个标签包含开始与结束，中间为代码内容， 代码分静态和动态，静态代码指的是一些参数和属性

的配置，动态代码可以包含业务逻辑，一般在action标签里面。

标签： krpano（根元素）、scene（场景）、 hotspot（热点）、 layer（图层）、 action（动作） ……

• 标签也也可以是简单闭合

代码内容块

krPano xml语法基础

Tour.xml文件由若干xml元素组成，xml元素也叫做xml节点或xml标签。例如layer元素也可叫

做layer标签。

xml元素的名字由一对单括号< >包围。

<element> ... </element> 每个元素包含开始与结束

<element /> 也可以是简单闭合

krPano 小技巧介绍

1、修改作品网页标题

2、修改缩图导航信息

3、修改模板

4、添加自动播放功能

5、小行星开场效果

6、利用代码进行补地

krPano 小技巧介绍

1、修改作品网页标题——编辑tour.html网页文件 title 属性

krPano 小技巧介绍

2、修改缩图导航信息

• 先修改tour.xml第一行的title

属性，再修改每一个场景的

title属性，该属性默认为图片

的名称。

• 注意：全景图一般以数字或英

文命名，但是在配置文件里面

title属性可以修改为中文。

krPano 小技巧介绍

3、修改模板

默认内置6套模板，根据需要启用其他的显示风格，把前后注释去掉就可以。

krPano 小技巧介绍

4、添加自动播放功能

在scene外面插入如下代码：

<autorotate enabled="true" waittime="2.0" speed="-3.0" horizon="0.0" tofov=“120" />

<autorotate

enabled="true" //是否开启自动旋转

waittime="2.5" //用户不对屏幕操作后，开始自动旋转的等待秒数

accel="1.0" //旋转扭曲的速度：角度/秒

speed="10.0" //最大旋转速度：角度/秒

horizon="0.0" //旋转到特定的水平位置

tofov="off" //缩放到特定的区域视角

/>

krPano 小技巧介绍

5、添加小行星开场效果

在skin_settings中可以设置是否启用。将 littleplanetintro=“false“改为true，则

项目打开时的第一个场景会有小行星开场的效果。

krPano 小技巧介绍

6、利用代码进行补地

定义一个热点 mylogo,选好补地图片，注意路径不要出错。

添加一个事件，当视点改变时候触发 onviewchange 方法，该方法会复制热点 mylogo 并随着观察

点的改变而旋转图片。

<events name="logorotation" keep="true"

onviewchange="copy(hotspot[mylogo].rotate,view.hlookat);" />

<hotspot name=“mylogo"

url="logo.png"keep="true"

ath="0"atv="90"

distorted="true"scale="1.0"rotate="0.0" onclick="openurl('http://jpkc.szpt.edu.cn');"

/>

插件使用

krPano各种功能都以插件的形式出现，插件一般都是独立的xml文件和配套的资源组成。也可以把代码

集成在tour.xml文件中。

语法样例 详见snow.xml

<plugin name="snow" zorder="1"

url="%SWFPATH%/plugins/snow.swf"

alturl="%SWFPATH%/plugins/snow.js"

floor="0.7"

onloaded="snowballs();"

/>

引用方式：

在场景中加入 <include url="snow.xml" />

插件使用

全景中插入热点微课视频

全景中插入平面视频

1、全景中视频的显示方式

2、资源包介绍

3、上传全景漫游作品到服务器上网站目录下面

4、把作品地址通过各种途径发布出去

平面热点代码

<hotspot name="videospot"

url="media_play.png"

scale="0.5"

ath="0" atv="0"

onclick="looktohotspot(get(name),90); videoplayer_open('video/1.mp4',

'video/1.jpg', 0.5);"

/>

添加平面视频

krPano合成案例

全景漫游作品发布

1、拥有支持网络访问的服务器

2、配置Web服务器

3、上传全景漫游作品到服务器上网站目录下面

4、把作品地址通过各种途径发布出去

720云全景漫游制作

PART

环物制作

04

环物案例

数码图片+Object2VR 3D扫描建模+WebGL 数码图片→3D模型+Unity3D

环物图片拍摄

拍摄方法：

物体放在转盘上面，相机固定在三角架上，

转盘自动转动，如转动一周为40秒，设置相

机隔一秒拍摄一张，则环物需要40张图片来

实现。

Object2VR环物制作

3D扫描技术

➢三维扫描仪（3D scanner）是一种科学仪器，用来侦测并分析现实世界中物体或环境的

形状（几何构造）与外观数据（如颜色、表面反照率等性质）。搜集到的数据常被用来进

行三维重建计算，在虚拟世界中创建实际物体的数字模型。

先临三维-EinScan 真人扫描

3D扫描建模+WebGL环物

模型来源：3D扫描仪实物扫描，采集模型数据

3Dmax里面导出为Obj模型文件和Mtl材质文件

Photoshop里面修改材质贴图

加载OBJ模型-模型 材质光源

数码图片转为为3D模型-3DF Zephyr Lite 4.500

PART

全景浏览与总结

05

全景漫游作品VR体验

体验1：手机 + VR Box(100 块左右) 体验2：PC + 专业头盔

知识点总结

Thanks！

深圳职业技术学院 陈锐浩