什么是全景图？如何把全景图运用到三维场景中去？怎么去处理全景图？全有哪些处理全景图的工具？全景图通过广角的表现手段以及绘画、相片、视频、三维模型等形式，尽可能多表现出周围的环境。360全景，即通过对专业相机捕捉整个场景的图像信息或者使用建模软件渲染过后的图片，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照片或者计算机建模图片变为360 度全观，用于虚拟现实浏览，把二维的平面图模拟成真实的三维空间，呈现给观赏者。
全景图跟三维可视化也是十分的切合，是否有可能全景图与三维场景结合到一起，实现在三维场景中查看全景图的效果呢？这个其实是可以实现的。ThingPano是基于ThingJS平台推出的全景工具套件，可简单高效地将高清全景图应用到 3D 环境中，实现3D宏观场景和全景微观场景的无缝融合，可快速调取、查看选定位置的全景图，以更加真实的环境，全视角覆盖被关注的场景。
那么ThingPano是如何使用的呢?
首先我们需要有全景图照片才行，因为ThingJS平台主要还是提供服务的，所以目前不支持处理普通手机拍摄的全景图，所以如果要使用全景图处理工具，就得购买专业设备进行全景图拍摄（可到淘宝或者京东搜索全景相机或具备全景图拍摄功能的无人机），这是由于目前ThingJS平台对于全景图照片有以下两个要求：
一、拍摄照片最终格式要求为 JPG 格式；
二、照片宽高比为2:1；
那么具体使用方式呢？不要急，现在就告诉大家如何去免费使用ThingJS的ThingPano来处理全景图以及加载到一个三维场景中去。
大致步骤如下，具体步骤放在后面细细给大家讲：
第一步：拍摄全景图照片；
第二步：上传全景图资料；
第三步：将全景图与全景球相关联(这样就使得全景图能够在三维场景中显示了)
第四步：保存该场景，然后进入ThingJS在线开发平台中打开该项目(在联网状态下，CamBuilder保存的场景将会自动同步到ThingJS在线开发中)
以下就是如何上传全景图资料以及最后将全景图变成全景球加载到三维场景中去了
第一步：全景照片拍摄(省略)；
第二步：上传资源；
1、启动 CamBuilder,点击“DIY模型库”，选择“上传资源”；
2、新建模型中，选择“全景球照片上传”；
3、在当前页面中，点击“选择文件”，选择满足上传要求的图片，点击“开始创建”，目前仅只支持单次单张上传，且这里需要在联网状态下操作；
4、上传完成后,可点击“查看全景图”进行预览；
5、在“已上传的全景球”中，可查看已上传的全景图。
第三步：将全景图与全景球相关联
1、CamBuilder 搭建摆放；
点击“新建”或者“编辑场景”；
2、在上方点击“扩展插件”，再点击“全景球助手”；
3、出现如下图所示的弹窗，点击上方在当前层级中新建全景球模型；
4、点击扳手样式，将上传转换完成的全景图和全景头球模型进行对应；
点击需要5、对应的全景图后，调整到预想角度，点击“确定”完成操作；
6、将剩余模型按上述方法创建完毕，点击“在当前层级中创建新的关系”；
7、设置全景球间的跳转关系，在面板右侧「场景中的关系」列表中，选择跳转关系的起始点和终止点；在面板左侧“场景中的全景球模型”列表中，选择需要填入关系的模型。点击中间的箭头按钮，可以将上述选择的关系和模型对应起来。当一个关系的两端全部配置完成后。场景中会出现相应的箭头标识；
8、配置完成后，点击“部署”按钮；
9、部署完成后可在当前场景双击预览，或者在预览场景下查看。
第四步：上传/同步ThingJS场景文件
目前在联网状态下。CamBuilder将自动同步场景，若是选择导出/上传，则点击上方“文件”按钮，点击导出下的“导出ThingJS场景包”；
这时候会弹出一个窗口，自动生成名称，点击“保存”即可保存成功，保存的文件其中包含了搭建的场景信息和全景图信息，但并不包含全景图资源（图片资源，配置资源）CamBuilder 中全景图资源会在联网时自动同步到 ThingJS 服务器，所以无需手动上传；
登录 ThingJS，点击进入“在线开发”，点击“园区”下的“上传园区”，选择并上传刚刚导出的项目，即可上传成功。
编写脚本加载 CamBuilder 项目；在刚才上传的的场景中，双击该园区缩略图，即可进行引用编辑；进入后复制如下代码，替换其中的 url，运行即可。
THING.Utils.dynamicLoad("/panooss/pano/js/thing.pano.min.js", function() {var app = new THING.App({
// 场景地址
url:
"http://www.thingjs.com/uploads/wechat/aHp5/scene/2018-10-29-09-46-35",
//背景设置
skyBox: "BlueSky"});app.on("load", function(evt) {
THING.PanoManager.getPanoJsonFromBuilder(null, function(panoData) {
if (panoData) {
THING.PanoManager.createPlayer(
panoData,
{
fullscreen: false,
location: "right-top",
offsetX: 0,
offsetY: 0
},
{},
null
);
}
});});});
执行脚本进行播放。
好了，这样子全景图就能够加载到全景球中间去了，同时也能够将我们的全景图变成真正可以使用的全景球场景啦~
网友评论