3D体验式旅游小程序的研发

叶木林，洪宏，李芳芳，丁雨露，刘妍，孙悦

摘要：由于经济的迅速发展，旅游的人也越来越多。为了便利人们旅游，该文基于微信小程序和3D建模技术设计一款旅游类线上3D小程序。目前互联网技术已经应用于百姓生活的方方面面，相较于传统的旅游来说，3D体验式旅游小程序直达民众、易于传播、更能减少中间流程，让更多的人可以看到景区美好的风景。旅游形式新颖，带来不一样的体验。

关键词：微信小程序；3D建模；云旅游

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2022）33-0045-03

随着科技的发展，人民生活水平提高，在解决温饱的前提下，人们更多地选择去追求精神的享受。旅游作为一项娱乐项目，近年来发展蓬勃，成为不少地区带动经济发展的主力军。中国地域辽阔，景点也是数不胜数，每当假期来临，大多数人休假的首选便是去旅游[1]。该团队成员都喜欢旅游，经常为假期出行选目的地而苦恼。经过大量走访调查，调查人员发现大部分人也有这种苦恼。而且因为新冠肺炎疫情的原因，出去旅游会导致大量人群聚集，不利于疫情防控。因此该团队准备研发出一款旅游类微信小程序，可以3D全景沉浸式体验旅游，无须面临线下出行的所有压力，一个小程序，就可以把游客带到想去的任何景点。不仅如此，该款小程序还加入了中草药模拟人物的新颖形式，给用户带来不一样的体验。沉浸式体验、旅游攻略全览、旅游纪念品购买、旅行足迹生成、旅游打卡、景点优惠购票、住宿交通等一站式旅游，省下时间金钱与精力，尽情享受轻松欢乐的旅行。

1关键技术简介

1.1 技术框架

该小程序采用3D建模技术来搭建框架。3D建模通俗来讲就是三维制作软件通过虚拟三维空间构建出具有三维数据的模型[2]。常用的商业3D软件有3DMAX、Rhino以及ZBrush，CAD 软件有AutoCAD、Solidworks、Servlet、TurboCAD 、Deluxe[3]。本项目应用这方面的知识，同时利用各个平台及软件上的资源。将通过走访调查、评论留言、打卡等方法来分析该项目的实际运行情况。用户可以使用Servlet来实现登录、注册和留言。评论留言及打卡等功能需要用户注册账户、登录后才可以使用。

1.2宣传方式

该项目的宣传形式将利用媒介、活动、公关、新闻的资源进行宣传，其中广告宣传为主要宣传方式。通过在线投放引擎（Online Serving Engine）实时响应请求，完成决策，离线分布式计算（Distributed Computing）数据处理平台，在线实时流式计算（Stream Computing）平台数据总线（Data Bus）连接和传输以上三部分数据流实现。

1.3数据库技术

小程序具有查询功能，需要用到数据库中的实地场景知识和关于药材的知识，应用程序与数据库建立连接之后，需要使用JDBC提供的API与数据库交互信息，可以查询、修改和更新数据库中的数据等。使用SQL语句让JDBC与数据库进行交互，JDBC提供的API可以将标准的SQL语句发送给数据库，实现与数据库的交互[4]。

2微信小程序的模块及功能设计

2.1首页页面板块

首页界面具有基本查询功能，分别是旅游、攻略、购物、打卡、购票五个基本功能区和上方搜索框方便用户随时搜寻想要找到的功能（图1）。上方搜索框之下放置了流动图片展示区，用于展示不同景区的风光，吸引用户驻足并安排相关旅游事项。页面简洁明了，一定程度上更加利于用户大脑提取利用最需要的信息，快速找到自己需要的内容。不同的功能模块亦呈现着不同的具体信息，例如：点击旅游模块即进入由用户自己操作的自由旅游模式，进入到该选项界面中，用户便可进行对自己感兴趣的景区进行搜索，同时本团队也会运用大数据的方式对用户进行热门旅游景区的推荐。在进入旅游景区后用户可以选择自己感兴趣的虚拟人物，选择自助旅行（即由用户自行操控虚拟人物，进行景点游览）或智能旅行（即虚拟人物通过程序设定的路线来带领游客进行景点游览）。在游览过程中每到一个景区的特色景点时，用户便可选择是否需要虚拟人物进行解说，该小程序也设置了付费解锁内容，来提高景点的吸引力，这也是本小程序的点睛之笔。攻略模块中有不同用户及旅游达人整理出的不同城市的旅游攻略，供想要旅游的用户选择。购物模块中用户可在其中购买景点或城市的热门周边及特产，足不出户就能购买到想要的旅游业产品，同时也可以给在3D旅游体验的用户们提供更多了解景区的选择，让用户们身临其境。打卡模块中用户可看到自己的旅游足迹，生成自己的旅游地图，也可在其中找到目的地的热门打卡地，在里面可以看到曾经去过相关景点的用户分享他们的旅游心得和他们认为的一些雷点，开放评论功能，便于用户和分享者进行交流。购票模块中用户可在其中购买往返目的地的车票及旅游景点的门票，免去了一部分排队购票的时间，用户可根据需求来选择，给了用户一个新的选择方式，提供新的一站式旅游服务。

2.2资料共享页面模块

小程序中，资料共享页面被命名为“发现”（如图2）。在“发现”内，用户及签约的旅游打卡博主可以自己上传旅游景点或相关城市的图片或打卡视频攻略，用户可以在这个模块中找到想要去的景区的攻略，得到很多种草，在不知道想要去哪里时也可以在这个界面找到答案。用户在进行了一趟美好的旅游后也可在这个模块中发布自己的旅游攻略及旅途中拍摄的风景照等，給其他用户分享旅游心得。

2.3个人操作页面模块

小程序内，个人操作页面被命名为“我的”（如图3）。在“我的”内，用户可以先进行登录，登录完成后，可在界面内查看“个人资料”“卡包”“设置”等模块，用户可以进行个人信息的修改，卡包的绑定及其他一些个性化的设置。

2.4功能技术实现

2.4.1用户登录

用户进入小程序时，先出现一个欢迎界面，在“我的”页面中提供登录功能，通过微信的wx.getUserInfo（object）接口确认用户授权获取用户头像、昵称、性别等基本信息进入主页面。

2.4.2页面框架

在app.json中“pages”属性中注册一些用户页面。主要页面包括：

1）home.wxml，首页在用户进入小程序时第一展示的界面为首页，首页为用户提供清楚的信息流。

2）fine.wxml，发现页面是景点视频展示区，为用户分享实景。

3）me.wxml，我的页面是用户信息展示区，也为用户提供卡包功能。

主要页面组成代码如下：

{

"pages"：[

pages/hoME/home，

pages/fid/find，

"pages/ME/me"，

"pages/LOGIN/login"，

"pages/SHOP/shop"，

"pages/WAY/way"

]，

底栏设计代码如下：

"tabBar"：

"list"：

text”：“首頁，

"pagePath"： "pages/HOME/home"，

iconPath"：“img/首页png”，

selectedIconPath"："img/首页png

}，

text：“发现，

pagePath"： "pages/FIND/find"，

iconPath"：“img/搜索png”，

selectedIconPath"：“img/搜索.png

text：“我的“，

pagePath"： "pages/ME/m

iconPath"：img/用户png”，

selectedIconPath"："img/用户png

}

2.4.3页面设计

1）“首页”设计

首页界面，提供一个全局搜索框，用户可以在此搜索景点、票务和其他用户等信息。全局搜索框下部提供滑块视图容器swiper，使用swiper-item组件，以及image组件进行首页图片的展示。图片展示使用wx：for="{{dis_img_list}}"功能为首页图片提供循环展示。图片可以展示优秀景点，image组件使用bindtap绑定点击“click_jump”函数。在home.js中添加click_jump函数进行页面跳转至相应的介绍界面。

2）“发现”设计

发现界面，提供景点视频展示，发现界面在一个view容器里，提供多个媒体组件video，调用VideoContext.play（）接口进行优质视频内容展示。视频上传，发现界面支持用户从手机上传视频到服务器中，使用wx.chooseMedia（Object object）API拍摄或从手机相册中选择图片或视频。

视频选择代码如下：

getVideo（e）{

wx.chooseMedia（{

count： 9，

mediaType： ['video']，

sourceType： ['album'， 'camera']，

maxDuration： 30

camera： 'back'

success（res）{

console. log（res. tempFiles. tempFilePath）

console. log（res. tempFiles. size）

}）

3）“我的”设计

我的界面主要展示用户个人信息。wx.getUserInfo（object）获取用户信息，使用object.success 回调函数对me.js中用户信息进行初始化。在me.wxml进行界面进行用户信息展示。用户除使用微信昵称、头像外，还支持用户进行头像上传，昵称修改。“我的”界面提供卡包功能，方便用户使用。

2.4.4评论交流技术的实现

在发现页面，用户观看同时，可以对视频进行评论。这个内容的实现需要给用户一个文本框，用户仅需要在里面输入内容即可。根据request请求从后台获取到用户输入的信息，再用print函数将其输出即可。通过定时刷新该页面，缩短刷新时间间隔，提高刷新频率，使用户可以及时看见自己的评论。

关于交流评论的关键代码如下：

discussAction：function（e）{console.log（“点击评论”）;wx .showToast（f

title："评论成功”，icon："none”

））

This.setData（i

discussionShow：true;}）

<view wx ：if-'{fdiscussionShow}}’>

<view class="view"style=*bottom：{finput_bottom}}rpx’wx：if="{{discussionShow}}">

（textarea class content”cursor-spacing-"30”fixed -"true”focus ”（discussionStou）}”placehorder-”优质评论可以帮助作者获得更高权重以<text bindtap-"send">发送</text></view>

3结束语

在人民生活水平的逐步提高的今天，旅游逐渐成了人们假期的一项占比很大的娱乐活动，近年来我国旅游业规模显著提高，同时也对旅游模式提出了新要求，“3D旅游”应运而生。随着互联网技术的发展及3D建模技术的不断成熟，旅游也将不再局限于实地欣赏[5]。该产品不仅可以向用户提供线下旅游服务还可供用户足不出户便可沉浸式感受景点美景，为时间紧张却想要放松旅游的人、热爱美景却苦于舟车劳顿的人提供了一种新的旅游思路。除此之外，现如今新冠肺炎疫情不断反复，线上旅游既满足了人们旅游的需求，又响应了相关政策。

参考文献：

[1] 国家旅游局.旅游设施与服务：LB/T 005—2011 LB/T 008～079—2011[S].北京：中国标准出版社，2011.

[2] 杜剑波.一种支撑稳定的面部3D建模矫正装置：CN214579818U[P].2021-11-02.

[2] 杜剑波.一种支撑稳定的面部3D建模矫正装置：CN214579818U[P].2021-11-02.

[4] 刘静，王家贤，韩朱忠.一种数据库监控方法，装置，服务器及介质：CN112540897A[P].2021-03-23.

[5] 赵双燕，贾金原，周文.Web3D家居素材库的轻量化技术研究[J].郑州大学学报（工学版），2019，40（1）：12-17.

【通联编辑：光文玲】