一种基于three.js的三维菜单创建及交互方法与流程

本发明属于网页交互，具体涉及一种基于three.js的三维菜单创建及交互方法。

背景技术：

1、在web1.0时代，网页只是向用户展示信息，即网页对于用户来说是只读的，用户可以通过网络阅读感兴趣的内容。进入web2.0时代，参与式社交网络，社交网络包含许多在线工具和平台，人们可以在其中分享他们的观点、意见、想法和经验，它突出了用户生成的内容、可用性和最终用户的互操作性。随着前端技术的发展，开发的web应用越来越复杂，这时面临一个重要的问题—如何在一个复杂的web应用内向用户提供更友好的交互体验。解决该问题的一种方案是在首页提供菜单导航功能，用户通过点击菜单，展开菜单项，点击对应的菜单项，结合路由机制，可以跳转到不同的页面。因此，网页菜单导航是网页设计中最重要的部分。好的菜单导航设计不仅能给用户带来舒服的视觉体验，而且还能带来良好的交互体验。它的作用是帮助用户快速地找到所需的信息，好的网页导航设计能极大提升用户的浏览体验。目前浏览器的网页导航交互一般都是先绘制好菜单导航的ui界面，并结合前端框架的路由机制，实现了web页面导航交互效果。

2、具体过程：点击某个链接，弹出菜单栏，选择不同的菜单项进行点击，这样可以跳转到不同的页面。目前实现导航的ui界面方案有三种，第一种方案是用html绘制网页导航的内容，并结合css控制导航网页的样式，包括：标签的颜色、导航页切换的效果；第二种方案是通过html、css和js结合的方式，绘制导航页面的内容以及交互效果，；第三种方案是用流行的ui框架实现导航的ui部分，比如element-ui、iview ui、mint ui、vant ui。方案一和方案二的缺点是在菜单项比较多的情况下，菜单导航的交互效果实现起来比较复杂，功能模块之间的关系也不够清楚，不利于提高开发效率和提升良好的用户体验；方案三是基于ui框架来实现菜单导航的，虽然在实现路由交互效果这个层面比较简单，但是它也存在功能模块之间关系模糊的问题，因为导航页面是二维的，对于复杂的网页，用户比较难弄清楚模块之间的关系，不利于快速找到所需的信息，体验感差。

3、因此需要一种三维菜单的创建及交互方法，能够创建交互逻辑清晰的三维菜单，并使用户以三位菜单便携完成交互。

技术实现思路

1、基于现有技术中存在的上述缺点和不足，本发明的目的之一是至少解决现有技术中存在的上述问题之一或多个，换言之，本发明的目的之一是提供满足前述需求之一或多个的一种基于three.js的三维菜单创建方法。

2、为了达到上述发明目的，本发明采用以下技术方案：

3、第一方面，本发明提供一种基于three.js的三维菜单创建方法，具体包括：

4、获取菜单的业务模块及模块层级；

5、创建菜单的文件页面；

6、将three.js文件引入文件页面；

7、使用three.js文件创建菜单的三维场景，菜单的三维场景包括场景、相机和渲染器；

8、根据业务模块及模块层级向场景加载物体；

9、根据业务模块及模块层级为物体添加交互事件；

10、根据业务模块及模块层级为物体的各个交互事件绑定url链接，url链接指向菜单的各个业务模块。

11、作为一种优选的实施方式，分析菜单的模块层级，具体包括：

12、分析菜单的主从关系，进而确定菜单中各个主模块及其附属的从模块，为每个业务模块设置对应的url地址。

13、作为一种优选的实施方式，将three.js文件引入页面，具体包括：

14、在菜单页面的script标签中引入three.js文件。

15、作为一种优选的实施方式，交互事件具体包括：

16、鼠标拾取交互、鼠标坐标获取交互、鼠标移动交互、鼠标点击交互。

17、作为一种优选的实施方式，根据业务模块及模块层级为物体添加交互事件时，还为每个交互事件添加物体的交互效果。

18、作为一种进一步优选的实施方式，物体的交互效果具体为物体的大小、位置、颜色中的一个或多个改变。

19、第二方面，本发明提供一种基于three.js的三维菜单交互方法，应用如上述任一项所创建的基于three.js的三维菜单，具体包括：

20、监听各个物体的交互事件；

21、根据交互事件获取对应的url；

22、根据url跳转至对应的业务模块。

23、作为一种优选的实施方式，监听各个物体的交互事件时，还包括：

24、若某一交互事件触发，同时触发该交互事件对应的物体的交互效果。

25、第三方面，本发明还提供一种基于three.js的三维菜单交互系统，应用如上述任一项所创建的基于three.js的三维菜单，具体包括：

26、业务模块，用于执行业务；

27、监听模块，用于监听基于three.js的三维菜单中各个物体的交互事件；

28、url获取模块，用于根据交互事件获取对应的url；

29、跳转模块，用于根据url跳转至对应的业务模块。

30、第四方面，本发明还提供一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序被处理器执行时实现如上述任一项的基于three.js的三维菜单交互方法。

31、第五方面，本发明还提供一种计算机设备，计算机设备包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序，计算机程序被处理器执行时实现如上述任一项的基于three.js的三维菜单交互方法。

32、本发明与现有技术相比，有益效果是：

33、本发明的创建与交互方法基于three.js创建三维菜单供用户交互，能清楚地展示各模块之间的关系，令用户能够快速找到所需信息，进而给用户提供更优的交互体验，提升其浏览网页的体验感和满意度。

技术特征：

1.一种基于three.js的三维菜单创建方法，其特征在于，具体包括：

2.如权利要求1所述的一种三维菜单创建方法，其特征在于，所述获取菜单的业务模块及模块层级，具体包括：

3.如权利要求1所述的一种三维菜单创建方法，其特征在于，所述将three.js文件引入所述页面，具体包括：

4.如权利要求1所述的一种三维菜单创建方法，其特征在于，所述交互事件具体包括：

5.如权利要求1所述的一种三维菜单创建方法，其特征在于，所述根据所述业务模块及模块层级为所述物体添加交互事件时，还为每个所述交互事件添加物体的交互效果。

6.如权利要求5所述的一种三维菜单创建方法，其特征在于，所述物体的交互效果具体为物体的大小、位置、颜色中的一个或多个改变。

7.一种基于three.js的三维菜单交互方法，应用如权利要求1-6任一项所创建的基于three.js的三维菜单，其特征在于，具体包括：

8.如权利要求7所述的一种三维菜单交互方法，其特征在于，所述监听各个物体的交互事件时，还包括：

9.一种基于three.js的三维菜单交互系统，应用如权利要求1-6任一项所创建的基于three.js的三维菜单，其特征在于，具体包括：

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求7至8任一项所述的方法。

11.一种计算机设备，其特征在于，所述计算机设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求7至8任一项所述的方法。

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

技术研发人员：丘凯辉
受保护的技术使用者：天翼云科技有限公司
技术研发日：
技术公布日：2024/1/12