2024年5月4日发(作者：)

2020.31科学技术创新

-

75

-

基于Unity3D的Web3D全景交互技术实现

杨绍清刘伯艳

渊河南职业技术学院袁河南郑州450046冤

摘要院720°全景交互技术作为一种新型的交互展示方式袁因其具有较强的沉浸感尧真实感尧交互感广泛应用多个各领域袁相

关制作平台随之兴起但自定义功能匮乏价格昂贵袁本文基于Unity3d开发平台袁开发完成一项房地产规划区720°全景交互Web

版展示案例袁实现了自定义功能的全景交互袁对于地图尧旅游尧教育尧医疗等仿真交互的实现提供了清晰可行的技术方案遥

关键词院WebVR曰720°全景图交互曰Unity3d

中图分类号院TP317.4文献标识码院A文章编号院2096-4390渊2020冤31-0075-02

1概述Education_Button尧Business_Button袁同时将设计好的按钮图标放

720°全景交互技术袁也可以称作VR技术的一种袁是由一

在Button组件中袁并设置Text为目标名称遥若发布web移动端袁

张全景贴图而不是维立体模型作为场景遥本文以一个房地产小需考虑按钮的自适应问题袁这里需要设置按钮的Rect

区规划全景展示作为案例实现如下功能院建立360°全景交互

Transform袁在AnchorPresets中将按钮固定在屏幕某侧袁这里固

场景袁实现手动720°视角旋转尧双手指缩放场景袁添加三个按定在了左侧遥

钮可以筛选场景中交通周边尧医疗配套尧商业休闲标签指示袁最

终发布为web版袁挂在服务器于手机端测试遥

2技术简介

Unity3d是一个专门用于搭建3D美术场景并实现场景交互的游

戏引擎袁最大的特点是场景渲染效果逼真尧交互开发简单易上

3.3交互功能实现

本案例的主要交互功能有院a.手指滑动实现720度视角旋转

b.双指同时扩展收缩控制场景的放大缩小袁视角远近交互遥c.按

3.3.1手指滑动旋转视角

以移动端的触摸交互为案例袁单手滑动旋转视角的脚本思

技术工具本文用的是Unity3d平台以及C#开发语言袁钮交互实现场景建筑标签切换标签遥

手袁多平台发布袁同类的还有UE5渊Unreal5冤袁渲染效果好袁但开路为院首先检测用户是否单手触摸滑动袁如果是移动触摸状态袁

发语言较难袁本文主要使用的软件工具有Photoshop尧3dsMax尧获取鼠标在屏幕上X和Y方向的滑动数据袁让该数据与摄像机

Unity3D遥

3实现步骤

3.1搭建全景交互场景

旋转的角度关联起来遥创建C#脚本并命名袁将脚本绑定于

MainCamera之上袁即滑动旋转视角速度袁水平方向旋转速度为

xSpeed袁竖直方向旋转速度为ySpeed袁单手滑动视角旋转数据的

三维场景搭建:a.在三维软件中袁我们将全景贴图无缝贴在核心代码院

这球体模型上袁把摄像机放在球体内部即可遥首先借助3Dmax

if(ount==1)//判断触摸为单点触摸且移动

创建一个标准球体袁该球体模型所有面需要做法线翻转处理袁

的场景中曰b.准备一张做好的全景贴图袁全景贴图的生成办法可

以用全景360度摄像机拍摄袁使用工具PTGui或Pano2VR拼

图袁细节不再叙述遥本案例是一张街道全景图袁为了后期能够用

应的分类标注上去袁再导入Unity中命名为Original_Texture遥c.

{

{

//如果触摸类型为移动触摸

//根据触摸点计算X与Y位置

Move_x+=s野(MouseX冶)*

Move_y-=s野(MouseY冶)*

将得到的x和y转换为四元数赋值给主摄像机的Transform

保持内部可见遥导出FBX格式袁将该球体模型导入Unity创建好

if(ch(0).phase==)

接袁在三维软件渊3Dmax袁Maya冤中渲染成为全景720°的全景贴

xSpeed*ime;

按钮交互显示街景的建筑分类袁在Photoshop中将贴图上建筑对

ySpeed*ime;}}

创建空物体命名VR3D360袁创建一个球作为其子物体命名组件中的rotation袁即可实现单手触摸并移动带动视角旋转袁注

SphereInside袁在其Inspector面板改变网格为Sphere_001曰创建材

意袁摄像机水平方向的旋转值x可以没有范围限制袁但是竖直方

质球命名360VRMaterials袁改变其Shader为Unlit/Texture或者向y的值应该有所限制袁否则用户很难回归正常视角袁限制摄像

渊Transparent冤袁此时将该材质的贴图指定为Original_Texture遥这

机y方向角度的核心代码如下院

时候我们已经看到场景中一个球体被一个全景图包裹遥d.创建

staticfloatClampAngle(floatangle,floatmin,floatmax)

摄像机袁这里使用默认的摄像机MainCamera袁本案例中需要一

个摄像机作为我们观察全景交互的野眼睛冶遥

3.2交互面板设计

使用Unity中的UGUI创建交互框架袁在Hierarchy面板中袁

{if(angle<-360)

angle+=360;

if(angle>360)

angle=360;

创建三个Button袁分别命名为Trafficsurround_Button尧

(angle,min,max);}

-

76

-

科学技术创新

此处在调用该函数时袁angle是手动滑动获取到的值袁本案端袁Unity允许发布为WebGL(html5)袁直接发布为网页模板遥在发

例给与的min是20度袁max是80度供参考袁该函数返回一个新布测试中注意院1.在OtherSetting中StripEngineCode此选项

y值袁y最终介于20-80之间遥

3.3.2双指控制视角缩放

大还是缩小移动袁好让摄像机做出对应反应遥首先系统需要检

测到触摸点数量大于1渊ount>1冤袁然后验证两个触

可减少未用到的代码提高效率遥如果使用了AssetBundle加载袁

需取消勾选此选项遥2.这里开启了PublishingSetting-Data

3.4.2测试设备配置

首先部署在服务器上袁测试服务器配置参数院CPU:Intel

该功能本质上是检测到用户双手触摸并移动袁再计算是放

Caching袁帮助数据缓存的提高加载速度遥

摸手指都在移动(ch(0).phase==

XeonE5-2682v4袁内存院4GB袁宽带5Mbps遥移动设备参数院运行

||ch(1).phase==)袁如果两个条件

内存4GB袁机械存储128GB袁操作系统EMUI9.1(基于Android

都成立袁那么就说明用户正在多指触摸并移动袁这里只计算前

9)袁处理器4*CortexA732.2GHz+4*CortexA531.7GHz袁浏览

两个手指触摸坐标遥检测了双指触摸移动袁创建函数命名为器院GoogleChrome遥

isEnlarge判断双指是做放大移动还是缩小移动遥该函数通过比

较两手指触摸起点距离渊leng1冤和滑动结束点的距离渊leng2冤大

小袁从而判断是张开还是收缩袁核心代码如下院

newP1,Vector2newP2)

//计算双指滑动前后的距离变化

{//函数传入上一次触摸两点的位置与本次触摸两点的位置

计算出用户的手势

3.4.3测试结果与分析

a.加载速度测试袁第一次开启测试10秒袁第二次6秒遥b.效

果显示测试袁UI显示正常尧场景资源显示正常袁与发布前一致袁

正常袁速度快慢需要反复调试袁双指缩放正常遥

4结论

对于传统的平面尧视频展示效果来说袁全景交互展示效果不

仅仅声音画面结合袁还具有交互性袁对于风景尧建筑展示非常适

privateboolisEnlarge(Vector2oldP1,Vector2oldP2,Vector2

效果良好遥c.交互功能测试袁按钮测试正常袁手指滑动旋转视角

floatleng1=((oldP1.x-oldP2.x)*(oldP1.x-oldP2.

用遥Unity3d能够实现自定义功能开发袁能够实现各类自定义化

x)+(oldP1.y-oldP2.y)*(oldP1.y-oldP2.y));//勾股定理计算

全景交互功能并且能够发布多种平台袁对于VR全景开发来说

两老点之间的距离

floatleng2=((newP1.x-newP2.x)*

if(leng1

{returntrue;}

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

对应手势缩放袁但是要有最大最小移动值限制遥

3.3.3按钮交互

该功能主要实现控制全景图中标签的切换袁实现按钮交互袁

用户可以从地图中筛选所关注的地点袁本案例中可以帮助用户

筛选场景中野交通周边冶尧野医疗配套冶尧野商业休闲冶遥同时地图会

以标签指示出对应的建筑遥该算法的基本原理是袁通过侦听按

钮事件袁让按钮控制对应的更换场景球的贴图的函数袁核心算

法院

publicvoidAddlistener()

{Changebutton[0].tener(onbutton0);

Changebutton[1].tener(onbutton1);

Changebutton[2].tener(onbutton2);}

publicvoidonbutton0()

{xture=BlueTexture[0];}

另外两个按钮代码同上袁BlueTexture[]是存储贴图的数组袁

用于存放不同标签的全景图袁更换的地方是材质球的贴图参

数遥

3.4发布与测试

3.4.1发布设置袁本案例最终发布为web版袁用于手机移动

(newP1.x-

newP2.x)+(newP1.y-newP2.y)*(newP1.y-newP2.y));

提供了技术支撑遥

参考文献

[1]魏三强.一种基于Unity3D的VR玻璃栈道制作技术[J].吉林

师范大学学报(自然科学版),2020,41(01):121-126.

[2]陈亚静.基于Unity3D和VR技术的数字校园体感交互系统设

计[J].长春工程学院学报(自然科学版),2019,20(3):67-71.

开发[D].武汉院华中科技大学,2018.

判断好手势的缩放以后袁创建函数控制摄像机的前后移动

[3]黄振宇.基于Unity3D的消失模铸造虚拟仿真实验教学系统