基于Unity3D 的Web 3D 全景交互技术实现

杨绍清 刘伯艳

（河南职业技术学院，河南 郑州450046）

1 概述

720°全景交互技术，也可以称作VR 技术的一种，是由一张全景贴图而不是维立体模型作为场景。本文以一个房地产小区规划全景展示作为案例实现如下功能：建立360°全景交互场景，实现手动720°视角旋转、双手指缩放场景，添加三个按钮可以筛选场景中交通周边、医疗配套、商业休闲标签指示，最终发布为web 版，挂在服务器于手机端测试。

2 技术简介

技术工具本文用的是Unity3d 平台以及C# 开发语言，Unity3d 是一个专门用于搭建3D 美术场景并实现场景交互的游戏引擎，最大的特点是场景渲染效果逼真、交互开发简单易上手，多平台发布，同类的还有UE5（Unreal 5），渲染效果好，但开发语言较难，本文主要使用的软件工具有Photoshop、3ds Max、Unity 3D。

3 实现步骤

3.1 搭建全景交互场景

三维场景搭建:a.在三维软件中，我们将全景贴图无缝贴在这球体模型上，把摄像机放在球体内部即可。首先借助3Dmax创建一个标准球体，该球体模型所有面需要做法线翻转处理，保持内部可见。导出FBX 格式，将该球体模型导入Unity 创建好的场景中；b.准备一张做好的全景贴图，全景贴图的生成办法可以用全景360 度摄像机拍摄，使用工具PTGui 或Pano2VR 拼接，在三维软件（3Dmax，Maya）中渲染成为全景720°的全景贴图，细节不再叙述。本案例是一张街道全景图，为了后期能够用按钮交互显示街景的建筑分类，在Photoshop 中将贴图上建筑对应的分类标注上去，再导入Unity 中命名为Original_Texture。c.创建空物体命名VR3D360，创建一个球作为其子物体命名SphereInside，在其Inspector 面板改变网格为Sphere_001；创建材质球命名360 VRMaterials，改变其Shader 为Unlit/Texture 或者（Transparent），此时将该材质的贴图指定为Original_Texture。这时候我们已经看到场景中一个球体被一个全景图包裹。d.创建摄像机，这里使用默认的摄像机MainCamera，本案例中需要一个摄像机作为我们观察全景交互的“眼睛”。

3.2 交互面板设计

使用Unity 中的UGUI 创建交互框架，在Hierarchy 面板中，创 建 三 个 Button， 分 别 命 名 为 Traffic surround_Button、Education_Button、Business_Button，同时将设计好的按钮图标放在Button 组件中，并设置Text 为目标名称。若发布web 移动端，需考虑按钮的自适应问题，这里需要设置按钮的Rect Transform，在Anchor Presets 中将按钮固定在屏幕某侧，这里固定在了左侧。

3.3 交互功能实现

本案例的主要交互功能有：a.手指滑动实现720 度视角旋转b.双指同时扩展收缩控制场景的放大缩小，视角远近交互。c.按钮交互实现场景建筑标签切换标签。

3.3.1 手指滑动旋转视角

以移动端的触摸交互为案例，单手滑动旋转视角的脚本思路为：首先检测用户是否单手触摸滑动，如果是移动触摸状态，获取鼠标在屏幕上X 和Y 方向的滑动数据，让该数据与摄像机旋转的角度关联起来。创建C# 脚本并命名，将脚本绑定于Main Camera 之上，即滑动旋转视角速度，水平方向旋转速度为xSpeed，竖直方向旋转速度为ySpeed，单手滑动视角旋转数据的核心代码：

将得到的x 和y 转换为四元数赋值给主摄像机的Transform组件中的rotation，即可实现单手触摸并移动带动视角旋转，注意，摄像机水平方向的旋转值x 可以没有范围限制，但是竖直方向y 的值应该有所限制，否则用户很难回归正常视角，限制摄像机y 方向角度的核心代码如下：

此处在调用该函数时，angle 是手动滑动获取到的值，本案例给与的min 是20 度，max 是80 度供参考，该函数返回一个新y 值，y 最终介于20-80 之间。

3.3.2 双指控制视角缩放

该功能本质上是检测到用户双手触摸并移动，再计算是放大还是缩小移动，好让摄像机做出对应反应。首先系统需要检测到触摸点数量大于1（Input.touchCount > 1），然后验证两个触摸手指都在移动(Input.GetTouch(0).phase == TouchPhase.Moved|| Input.GetTouch(1).phase == TouchPhase.Moved)，如果两个条件都成立，那么就说明用户正在多指触摸并移动，这里只计算前两个手指触摸坐标。检测了双指触摸移动，创建函数命名为isEnlarge 判断双指是做放大移动还是缩小移动。该函数通过比较两手指触摸起点距离（leng1）和滑动结束点的距离（leng2）大小，从而判断是张开还是收缩，核心代码如下：privatebool isEnlarge (Vector2 oldP1, Vector2 oldP2, Vector2 newP1, Vector2 newP2)//计算双指滑动前后的距离变化{ //函数传入上一次触摸两点的位置与本次触摸两点的位置计算出用户的手势float leng1 = Mathf.Sqrt((oldP1.x- oldP2.x) * (oldP1.x- oldP2.x) + (oldP1.y- oldP2.y) * (oldP1.y- oldP2.y));//勾股定理计算两老点之间的距离float leng2 = Mathf.Sqrt ((newP1.x- newP2.x) * (newP1.x-newP2.x) + (newP1.y- newP2.y) * (newP1.y- newP2.y));if (leng1 < leng2) //放大手势

{ returntrue;}else{ returnfalse; //缩小手势}}

判断好手势的缩放以后，创建函数控制摄像机的前后移动对应手势缩放，但是要有最大最小移动值限制。

3.3.3 按钮交互

该功能主要实现控制全景图中标签的切换，实现按钮交互，用户可以从地图中筛选所关注的地点，本案例中可以帮助用户筛选场景中“交通周边”、“医疗配套”、“商业休闲”。同时地图会以标签指示出对应的建筑。该算法的基本原理是，通过侦听按钮事件，让按钮控制对应的更换场景球的贴图的函数，核心算法：publicvoid Addlistener()

{ Changebutton[0].onClick.AddListener(onbutton0);Changebutton[1].onClick.AddListener(onbutton1);Changebutton[2].onClick.AddListener(onbutton2);}publicvoid onbutton0()

{ TheMaterial.mainTexture = BlueTexture[0];}

另外两个按钮代码同上，BlueTexture[]是存储贴图的数组，用于存放不同标签的全景图，更换的地方是材质球的贴图参数。

3.4 发布与测试

3.4.1 发布设置，本案例最终发布为web 版，用于手机移动端，Unity 允许发布为WebGL(html5)，直接发布为网页模板。在发布测试中注意：1. 在Other Setting 中Strip Engine Code 此选项可减少未用到的代码提高效率。如果使用了AssetBundle 加载，需取消勾选此选项。2. 这里开启了Publishing Setting-Data Caching，帮助数据缓存的提高加载速度。

3.4.2 测试设备配置

首先部署在服务器上，测试服务器配置参数：CPU: Intel Xeon E5-2682v4，内存：4GB，宽带5Mbps。移动设备参数：运行内存4GB，机械存储128GB，操作系统EMUI 9.1 (基于Android 9)，处理器4 *CortexA73 2.2GHz + 4*CortexA53 1.7GHz，浏览器：Google Chrome。

3.4.3 测试结果与分析

a.加载速度测试，第一次开启测试10 秒，第二次6 秒。b.效果显示测试，UI 显示正常、场景资源显示正常，与发布前一致，效果良好。c.交互功能测试，按钮测试正常，手指滑动旋转视角正常，速度快慢需要反复调试，双指缩放正常。

4 结论

对于传统的平面、视频展示效果来说，全景交互展示效果不仅仅声音画面结合，还具有交互性，对于风景、建筑展示非常适用。Unity3d 能够实现自定义功能开发，能够实现各类自定义化全景交互功能并且能够发布多种平台，对于VR 全景开发来说提供了技术支撑。