一种基于three.js的三维菜单创建及交互方法技术

本发明专利技术涉及一种基于three.js的三维菜单创建方法，具体包括：获取菜单的业务模块及模块层级，创建菜单的文件页面，将three.js文件引入文件页面，使用three.js文件创建菜单的三维场景，菜单的三维场景包括场景、相机和渲染器，根据业务模块及模块层级向场景加载物体、为物体添加交互事件、为各个交互事件绑定url链接，url链接指向菜单的各个业务模块。本发明专利技术的方法基于three.js创建三维菜单供用户交互，能清楚地展示各模块之间的关系，令用户能够快速找到所需信息，进而给用户提供更优的交互体验，提升其浏览网页的体验感和满意度。提升其浏览网页的体验感和满意度。提升其浏览网页的体验感和满意度。

【技术实现步骤摘要】
一种基于three.js的三维菜单创建及交互方法


[0001]本专利技术属于网页交互
，具体涉及一种基于three.js的三维菜单创建及交互方法。

技术介绍

[0002]在web1.0时代，网页只是向用户展示信息，即网页对于用户来说是只读的，用户可以通过网络阅读感兴趣的内容。进入web2.0时代，参与式社交网络，社交网络包含许多在线工具和平台，人们可以在其中分享他们的观点、意见、想法和经验，它突出了用户生成的内容、可用性和最终用户的互操作性。随着前端技术的发展，开发的web应用越来越复杂，这时面临一个重要的问题—如何在一个复杂的web应用内向用户提供更友好的交互体验。解决该问题的一种方案是在首页提供菜单导航功能，用户通过点击菜单，展开菜单项，点击对应的菜单项，结合路由机制，可以跳转到不同的页面。因此，网页菜单导航是网页设计中最重要的部分。好的菜单导航设计不仅能给用户带来舒服的视觉体验，而且还能带来良好的交互体验。它的作用是帮助用户快速地找到所需的信息，好的网页导航设计能极大提升用户的浏览体验。目前浏览器的网页导航交互一般都是先绘制好菜单导航的UI界面，并结合前端框架的路由机制，实现了web页面导航交互效果。
[0003]具体过程：点击某个链接，弹出菜单栏，选择不同的菜单项进行点击，这样可以跳转到不同的页面。目前实现导航的UI界面方案有三种，第一种方案是用html绘制网页导航的内容，并结合css控制导航网页的样式，包括：标签的颜色、导航页切换的效果；第二种方案是通过html、css和js结合的方式，绘制导航页面的内容以及交互效果，；第三种方案是用流行的UI框架实现导航的UI部分，比如element
‑
ui、iView UI、Mint UI、Vant UI。方案一和方案二的缺点是在菜单项比较多的情况下，菜单导航的交互效果实现起来比较复杂，功能模块之间的关系也不够清楚，不利于提高开发效率和提升良好的用户体验；方案三是基于UI框架来实现菜单导航的，虽然在实现路由交互效果这个层面比较简单，但是它也存在功能模块之间关系模糊的问题，因为导航页面是二维的，对于复杂的网页，用户比较难弄清楚模块之间的关系，不利于快速找到所需的信息，体验感差。
[0004]因此需要一种三维菜单的创建及交互方法，能够创建交互逻辑清晰的三维菜单，并使用户以三位菜单便携完成交互。

技术实现思路

[0005]基于现有技术中存在的上述缺点和不足，本专利技术的目的之一是至少解决现有技术中存在的上述问题之一或多个，换言之，本专利技术的目的之一是提供满足前述需求之一或多个的一种基于three.js的三维菜单创建方法。
[0006]为了达到上述专利技术目的，本专利技术采用以下技术方案：第一方面，本专利技术提供一种基于three.js的三维菜单创建方法，具体包括：获取菜单的业务模块及模块层级；
创建菜单的文件页面；将three.js文件引入文件页面；使用three.js文件创建菜单的三维场景，菜单的三维场景包括场景、相机和渲染器；根据业务模块及模块层级向场景加载物体；根据业务模块及模块层级为物体添加交互事件；根据业务模块及模块层级为物体的各个交互事件绑定url链接，url链接指向菜单的各个业务模块。
[0007]作为一种优选的实施方式，分析菜单的模块层级，具体包括：分析菜单的主从关系，进而确定菜单中各个主模块及其附属的从模块，为每个业务模块设置对应的url地址。
[0008]作为一种优选的实施方式，将three.js文件引入页面，具体包括：在菜单页面的script标签中引入three.js文件。
[0009]作为一种优选的实施方式，交互事件具体包括：鼠标拾取交互、鼠标坐标获取交互、鼠标移动交互、鼠标点击交互。
[0010]作为一种优选的实施方式，根据业务模块及模块层级为物体添加交互事件时，还为每个交互事件添加物体的交互效果。
[0011]作为一种进一步优选的实施方式，物体的交互效果具体为物体的大小、位置、颜色中的一个或多个改变。
[0012]第二方面，本专利技术提供一种基于three.js的三维菜单交互方法，应用如上述任一项所创建的基于three.js的三维菜单，具体包括：监听各个物体的交互事件；根据交互事件获取对应的url；根据url跳转至对应的业务模块。
[0013]作为一种优选的实施方式，监听各个物体的交互事件时，还包括：若某一交互事件触发，同时触发该交互事件对应的物体的交互效果。
[0014]第三方面，本专利技术还提供一种基于three.js的三维菜单交互系统，应用如上述任一项所创建的基于three.js的三维菜单，具体包括：业务模块，用于执行业务；监听模块，用于监听基于three.js的三维菜单中各个物体的交互事件；url获取模块，用于根据交互事件获取对应的url；跳转模块，用于根据url跳转至对应的业务模块。
[0015]第四方面，本专利技术还提供一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序被处理器执行时实现如上述任一项的基于three.js的三维菜单交互方法。
[0016]第五方面，本专利技术还提供一种计算机设备，计算机设备包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序，计算机程序被处理器执行时实现如上述任一项的基于three.js的三维菜单交互方法。
[0017]本专利技术与现有技术相比，有益效果是：
本专利技术的创建与交互方法基于three.js创建三维菜单供用户交互，能清楚地展示各模块之间的关系，令用户能够快速找到所需信息，进而给用户提供更优的交互体验，提升其浏览网页的体验感和满意度。
附图说明
[0018]图1是本专利技术的一种基于three.js的三维菜单创建方法的流程图。
具体实施方式
[0019]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。
[0020]在下述介绍中提供了本申请的多个实施例，不同实施例之间可以替换或者合并组合，因此本申请也可认为包含所记载的相同和/或不同实施例的所有可能组合。因而，如果一个实施例包含特征A、B、C，另一个实施例包含特征B、D，那么本申请也应视为包括含有A、B、C、D的一个或多个所有其他可能的组合的实施例，尽管该实施例可能并未在以下内容中有明确的文字记载。
[0021]下面的描述提供了示例，并且不对权利要求书中阐述的范围、适用性或示例进行限制。可以在不脱离本申请内容的范围的情况下，对描述的元素的功能和布置做出改变。各个示例可以适当省略、替代或添加各种过程或组件。例如所描述的方法可以以所描述的顺序不同的顺序来执行，并且可以添加、省略或组合各种步骤。此外，可以将关于一些示例描述的特征组合到其他示例中。
[0022]首先，对本申请的方法所运用的基础技术做简单说明： Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单。Three.js是基于WebGL的Javascript开源框本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于three.js的三维菜单创建方法，其特征在于，具体包括：获取菜单的业务模块及模块层级；创建菜单的文件页面；将three.js文件引入所述文件页面；使用所述three.js文件创建菜单的三维场景，所述菜单的三维场景包括场景、相机和渲染器；根据所述业务模块及模块层级向所述场景加载物体；根据所述业务模块及模块层级为所述物体添加交互事件；根据所述业务模块及模块层级为物体的各个交互事件绑定url链接，所述url链接指向菜单的各个业务模块。2.如权利要求1所述的一种三维菜单创建方法，其特征在于，所述获取菜单的业务模块及模块层级，具体包括：获取菜单的主从关系，进而确定菜单的业务模块中各个主模块及其附属的从模块，为每个业务模块设置对应的url地址。3.如权利要求1所述的一种三维菜单创建方法，其特征在于，所述将three.js文件引入所述页面，具体包括：在所述菜单页面的script标签中引入three.js文件。4.如权利要求1所述的一种三维菜单创建方法，其特征在于，所述交互事件具体包括：鼠标拾取交互、鼠标坐标获取交互、鼠标移动交互、鼠标点击交互。5.如权利要求1所述的一种三维菜单创建方法，其特征在于，所述根据所述业务模块及模块层级为所述物体添加交互事件时，还为每个所述交互事件添加物体的交互效果。6.如权利要求5所述的一种三维菜单创建方法，其特征在于，所述物体的交互效果具体为...

【专利技术属性】
技术研发人员：丘凯辉，
申请(专利权)人：天翼云科技有限公司，
类型：发明
国别省市：