Realization method, display method and device of Web rotation menu, equipment and medium

Abstract

The invention relates to an implementation method, a display method and device of a Web rotation menu, equipment and a medium. The implementation method comprises the following steps: creating a rotation menu project based on a 3D engine; importing menu item elements into the rotary menu project, configuring a first script for executing display for each menu item element, and defining basic information of the menu item elements in the first script; configuring a second script in the rotary menu project, and defining control parameters of menu item elements in the second script; the method main body for configuring the method parameters comprises the steps of circularly traversing menu item elements, rotating the menu item elements according to the control parameters of the second script, and updating the basic information of the first script; and packaging and publishing the rotary menu project into a WebGL program and embedding the WebGL program into a Web front-end page, and by adopting the implementation method provided by the invention, the problems that the difficulty is high and the development cost is high when the Web front-end page uses a WebGL native API (Application Program Interface) and a third-party library to carry out 3D (Three-Dimensional) development in the prior art can be improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to an implementation method, display method, device, equipment and medium of a Web rotating menu. Background Art

[0002] In traditional Web (World Wide Web) front-end pages, navigation and menus are usually implemented in 2D graphics, which has a relatively simple visual effect and cannot meet the needs of users.

[0003] Although Web technology provides a native WebGL (Web Graphics Library) encapsulated 3D engine Three.js for 3D scene construction, the documentation of Three.js itself is not particularly complete, and it is difficult and costly to develop and learn using the WebGL native API (Application Programming Interface). Summary of the invention

[0004] Based on this, a method for implementing a Web rotating menu, a method for displaying a Web rotating menu, a device, an equipment and a medium are provided to improve the problem in the prior art that it is difficult and costly to perform 3D development on a Web front-end page using the WebGL native API and a third-party library.

[0005] On the one hand, a method for implementing a web rotating menu is provided, comprising:

[0006] Create a rotating menu project based on the 3D engine, and switch to the WebGL publishing platform to configure the packaging and publishing parameters;

[0007] Importing menu item elements into the rotation menu project, and configuring a first script for executing and displaying each of the menu item elements, defining basic information of the menu item elements in the first script, wherein the basic information at least includes the position in three-axis directions and the current angle during the rotation process;

[0008] A second script is configured in the rotation menu project, and control parameters of the menu item element are defined in the second script, wherein the control parameters at least include rotation track parameters and rotation angular velocity;

[0009] Defining method parameters of the rotation menu project, including configuring the method body of the method parameters to loop through menu item elements, rotate the menu item elements according to the control parameters of the second script, and update the basic information of the first script;

[0010] The rotating menu project is packaged and published as a WebGL program according to the package publishing parameters and embedded into a Web front-end page.

[0011] In one embodiment, configuring the second script in the rotation menu project further includes:

[0012] Configure whether to lock the rotation angular velocity;

[0013] The method body for configuring the method parameters also includes:

[0014] If the rotation angular velocity is locked, the menu item element is configured to rotate at a constant speed at the set rotation angular velocity;

[0015] If the rotation angular velocity is not locked, the rotation angular velocity is calculated based on the mouse position and the screen width.

[0016] In one embodiment, the basic information of the menu item element is defined in the first script, further comprising:

[0017] Defines the scaling of menu item elements during rotation;

[0018] The configuring of the second script in the rotation menu project further includes configuring indication information of whether to lock the zoom ratio during the rotation process;

[0019] The method body for configuring the method parameters also includes looping through menu item elements, determining the scaling ratio of the menu item elements according to the instruction information of the second script, and updating the scaling ratio in the first script.

[0020] In one embodiment, configuring the second script in the rotation menu project further includes configuring a zoom threshold;

[0021] The method body for configuring the method parameters also includes determining a current zoom ratio of the menu item element, and if the current zoom ratio is less than a zoom threshold, performing a rendering level change.

[0022] In one embodiment, the method body of configuring the method parameters further includes monitoring mouse events to obtain mouse position information;

[0023] Determining whether the mouse is hovering over the menu item element according to the mouse position information and the basic information of the menu item element;

[0024] If yes, execute the rotation operation stop instruction.

[0025] In one embodiment, the process of defining the rotation orbit parameters includes:

[0026] Define a first axis radius along a first axis direction and a second axis radius along a second axis direction in a three-dimensional coordinate system, wherein the first axis direction and the second axis direction are perpendicular to each other;

[0027] Define a third axis value along the third axis direction in a three-dimensional coordinate system, wherein the third axis direction is perpendicular to the plane where the first axis direction and the second axis direction are located.

[0028] In another aspect, a method for displaying a web rotating menu is provided, comprising:

[0029] In response to an opening instruction of the Web front-end page, calling a WebGL program embedded in the Web front-end page, wherein the WebGL program is packaged and published to a WebGL publishing platform by the rotating menu project according to a package publishing parameter;

[0030] The rotation menu project is created based on a 3D engine, including importing menu item elements into the rotation menu project, and configuring a first script for executing and displaying each of the menu item elements, defining basic information of the menu item elements in the first script, wherein the basic information at least includes the position in the three-axis directions during the rotation process and the current angle; configuring a second script in the rotation menu project, defining control parameters of the menu item elements in the second script, wherein the control parameters at least include rotation orbit parameters and rotation angular velocity; defining method parameters of the rotation menu project, including configuring the method body of the method parameters including looping through the menu item elements, rotating the menu item elements according to the control parameters of the second script, and updating the basic information of the first script.

[0031] In another aspect, a device for implementing a web rotation menu is provided, the device comprising:

[0032] The 3D engine module is used to create a rotating menu project based on the 3D engine, and import menu item elements into the rotating menu project.

[0033] Publishing module, used to switch to the WebGL publishing platform to configure package publishing parameters;

[0034] The 3D engine module includes a first script unit, a second script unit and a method parameter unit, wherein the first script unit is used to configure a first script for executing and displaying each of the menu item elements, and the basic information of the menu item elements is defined in the first script, wherein the basic information at least includes the position in the three-axis directions and the current angle during the rotation process; the second script unit is used to configure a second script in the rotation menu project, and the control parameters of the menu item elements are defined in the second script, wherein the control parameters at least include the rotation track parameters and the rotation angular velocity; the method parameter unit is used to define the method parameters of the rotation menu project, including that the method body for configuring the method parameters includes looping through the menu item elements, rotating the menu item elements according to the control parameters of the second script, and updating the basic information of the first script;

[0035] The publishing unit is also used to package and publish the rotating menu project into a WebGL program according to the packaging and publishing parameters and embed it into a Web front-end page.

[0036] A computer device is also provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the method is implemented when the processor executes the computer program.

[0037] A computer-readable storage medium is also provided, on which a computer program is stored, and when the computer program is executed by a processor, the method described above is implemented.

[0038] The implementation method, display method, device, equipment and medium of the above-mentioned Web rotating menu create a rotating menu project based on a 3D engine, import menu item elements in the rotating menu project, and configure a first script for each menu item element, so that the menu item element is displayed based on the first script, configure a second script in the rotating menu project, define control parameters of the menu item elements in the second script, so as to control the rotation of the entire menu, and also define method parameters of the rotating menu project, configure specific methods in the rotation process, calculate the position after rotation at a certain rotation angular velocity and update it to the basic information of each menu item element, and package and publish the rotating menu project as a WebGL program and embed it into the Web front-end page, without using the WebGL native API and third-party libraries for 3D development, providing a simple and fast rotating menu implementation method. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 The figure is a flowchart of a method for implementing a Web rotation menu in one embodiment;

[0040] Figure 2 A schematic diagram of parameter configuration in an embodiment;

[0041] Figure 3A schematic diagram of the implementation and deployment of a method for implementing a Web rotation menu in another embodiment;

[0042] Figure 4 A schematic diagram of the effect of a Web rotation menu in one embodiment;

[0043] Figure 5 is a structural block diagram of a device for implementing a Web rotating menu in one embodiment;

[0044] Figure 6 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0045] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0046] Menu options can be displayed on the Web front-end page to provide page navigation function. Traditional Web front-end page navigation and menus are implemented in the form of 2D graphics and text, which can only present a flat effect and cannot meet users' needs for better visual effects.

[0047] The native WebGL API can be used for 3D development on the Web. Three.js is a third-party function library encapsulated based on the native WebGL API. It can freely customize and combine various elements according to specific needs to create unique three-dimensional scenes. However, its documentation is not perfect. Although there are certain documents and examples, some parts are not detailed and clear enough, which makes it difficult for developers to find accurate solutions when encountering specific problems, and it is difficult to learn and develop.

[0048] This application is based on creating a rotating menu project based on a 3D engine, and configuring the packaging and publishing parameters on the WebGL publishing platform. After the rotating menu project is configured in the 3D engine, it is packaged and published as a WebGL program and embedded in the Web front-end page, providing a simple and fast implementation method, thereby saving development costs and development cycles.

[0049] In one embodiment, the implementation method of the Web rotation menu is as follows: Figure 1 As shown, the following steps are included:

[0050] Step 110: Create a rotating menu project based on the 3D engine, and switch to the WebGL publishing platform to configure packaging and publishing parameters.

[0051] A 3D engine is a low-level tool that supports the development of graphics software. It is an encapsulation of the 3D image general algorithm API. The main functions of a 3D engine are:

[0052] Graphics rendering: responsible for converting 3D models and scenes into two-dimensional images, including the processing of lighting, materials, texture mapping and other effects.

[0053] Model loading and management: Supports importing and loading various 3D model file formats, such as OBJ, FBX, etc., and organizes, manages and optimizes models.

[0054] Animation system: supports the creation and playback of various animation effects, such as skeletal animation, keyframe animation, etc.

[0055] Physics engine: simulates the physical behavior of objects, such as gravity, collision, friction, etc., to provide a realistic physical interaction experience.

[0056] User interaction: Provides functions for interacting with 3D scenes, such as support for input devices such as mouse, keyboard, and touch.

[0057] Cross-platform support: It can run on different operating systems and hardware platforms, ensuring a consistent experience on multiple devices.

[0058] In this embodiment, the rotation menu function is implemented based on the Unity3D engine integrated development. A new rotation menu project is created in the Unity3D engine tool, and the WebGL publishing platform is switched to configure the packaging and publishing parameters.

[0059] Step 120, importing menu item elements into the rotation menu project, and configuring a first script for executing display for each of the menu item elements, defining basic information of the menu item elements in the first script, wherein the basic information at least includes the position in the three-axis directions and the current angle during the rotation process.

[0060] Menu item elements are menu UI (User Interface) elements. Import the required menu UI elements according to actual project requirements and build the scene and interface layout.

[0061] At the same time, a new C# script class, namely the first script, is created to define the basic information of the menu item element. The basic information can be understood as the current state of the menu item element, which records the position of the menu item element in three axes during rotation, such as the x-axis position (such as coordinates), y-axis position, z-axis position, and the current angle relative to the reference direction during rotation.

[0062] The first script is mounted on each menu object. If it is a dynamically created menu item element, the script can be added when the menu item element is generated. When displayed, each menu item element can be displayed according to the basic information of the first script.

[0063] Step 130, configuring a second script in the rotation menu project, defining control parameters of the menu item elements in the second script, wherein the control parameters at least include rotation track parameters and rotation angular velocity.

[0064] In the actual implementation process, a new C# script class is created again, namely the second script, which is used to control the rotation of the entire menu. The rotation track parameters and rotation angular velocity are defined in the script.

[0065] In actual implementation, the process of defining rotation orbit parameters includes:

[0066] Define a first axis radius along a first axis direction and a second axis radius along a second axis direction in a three-dimensional coordinate system, wherein the first axis direction and the second axis direction are perpendicular to each other;

[0067] Define a third axis value along the third axis direction in a three-dimensional coordinate system, wherein the third axis direction is perpendicular to the plane where the first axis direction and the second axis direction are located.

[0068] For example, taking the XYZ three-axis space as an example, the X-axis radius (radiusX) and Y-axis radius (radiusY) parameters are configured to customize the elliptical orbit of the menu item element rotating around the center point. When the X-axis radius and the Y-axis radius are the same, the menu item will rotate around the center point in a circular orbit.

[0069] You can also configure the Z axis value. Specifically, in the second script, configure whether to lock the Z axis value (isLockZAxis). When this parameter is true, it means that the Z axis value is locked and is set to 0 by default. When this parameter is false, it means that the Z axis value is not locked and is assigned according to the value calculated in the three-dimensional space. Usually, this parameter is configured to true when implementing a 2D or 2.5D rotation menu, and set to false when implementing a 3D rotation menu.

[0070] The rotation speed of the menu can be changed by configuring the rotation angular speed (angleSpeed). When the rotation angular speed is less than 0, the menu item element rotates clockwise around the center point. When the rotation angular speed is greater than 0, the menu item element rotates counterclockwise around the center point.

[0071] Step 140, defining method parameters of the rotation menu project, including configuring the method body of the method parameters to loop through menu item elements, rotate the menu item elements according to the control parameters of the second script, and update the basic information of the first script.

[0072] Adding method parameters can implement object-related behaviors by executing the code therein. In the Unity3D engine, initialization is performed in the Awake or Start method. The method body of the Awake or Start method includes traversing the menu item elements, using the three-dimensional space coordinates (XYZ) to initialize and calculate the position of each menu item element evenly distributed in the elliptical (circular) track and other information, and updating it to the first script corresponding to each menu item element.

[0073] After initialization, the rotation menu control is performed in the Update method. This method is called once in each frame to update the state and behavior of the object. The main body of the Update method includes operations such as looping through the menu item elements, using the three-dimensional space coordinates (XYZ) to rotate 360 ​​degrees around the center point in an elliptical (circular) orbit to calculate the position of each menu item and other information, and update it in real time to the first script corresponding to each menu item element. The calculation is based on the control parameters defined in the second script.

[0074] Step 150: package and publish the rotating menu project into a WebGL program according to the package and publish parameters and embed it into the Web front-end page.

[0075] The above solution can present a three-dimensional rotation effect, creating a better sense of space for users, thereby achieving good visual effects and user experience. Moreover, it is developed based on the Unity3D engine, which is less difficult than using the WebGL native API and third-party libraries for 3D development, thereby saving development costs and development cycles.

[0076] On the other hand, based on the cross-platform characteristics of the Unity3D engine, the rotating menu implemented by the present application is cross-platform and can be released on mainstream system platforms including Windows, macOS, Linux, Android, iOS, etc. The present application also uses Unity to support Web technologies such as WebGL and HTML5, allowing developers to embed applications directly into web pages, making it convenient for users to use them on different devices.

[0077] Furthermore, when configuring the second script in the rotation menu project, whether to lock the rotation angular velocity is also configured;

[0078] The method body for configuring the method parameters also includes that if the rotation angular velocity is locked in the second script, the method body configures the menu item element to rotate at a uniform speed at the set rotation angular velocity; if the rotation angular velocity is not locked, the rotation angular velocity is calculated based on the mouse position and screen width. The calculation method refers to the existing technology or is calculated by the program software according to its built-in algorithm, which will not be repeated here.

[0079] In the actual implementation process, the Unity3D engine can be configured to lock the rotation angular velocity (is Lock AngleSpeed). When this parameter is true, the menu item element will rotate at a constant speed around the center point at the configured rotation angular velocity; when this parameter is false, the menu item element will dynamically calculate the rotation speed around the center point based on the mouse position and screen width.

[0080] By flexibly setting the rotation angular velocity of the rotation menu, different display effects can be achieved for different scenarios, such as providing different rotation display experiences on mobile phones or computers.

[0081] In another embodiment, the basic information defined in the first script also includes the scaling ratio during the rotation process. When configuring the second script, indication information on whether to lock the scaling ratio during the rotation process is also configured. The method body for configuring the method parameters also includes looping through the menu item elements, determining the scaling ratio of the menu item elements according to the indication information of the second script, and updating the scaling ratio in the first script.

[0082] For example, the second script can be configured to lock the scaling (is Lock Scale). When the parameter is true, it means locking the scaling value, and the scaling defaults to 1; when the parameter is false, it means not locking the scaling, and the value is assigned according to the scaling value calculated in the three-dimensional space. Generally, the size of the menu item element at the front is larger, and the size of the element at the back is smaller. Usually, this parameter is configured to true when implementing a 3D rotation menu, and is set to false when implementing a 2D or 2.5D rotation menu.

[0083] The present application scheme calculates the position and scaling ratio of each menu item element by rotating the track and updates it in real time. That is, the position, size and other information of each menu item element after rotating at a certain speed according to the elliptical (circular) track set by parameters are first calculated and set to each menu item element in real time. For 2D menu item elements to achieve 3D effect, the position and size of the menu item elements on the screen are actually calculated to achieve the effect of 3D depth of field.

[0084] Furthermore, when configuring the second script, it also includes configuring a zoom threshold, and the method body also includes determining the current zoom ratio of the menu item element, and if the current zoom ratio is less than the zoom threshold, executing the rendering level change.

[0085] Exemplarily, the zoom threshold is configured as 0.7 in the second script. When the zoom ratio recorded by the first script is less than 0.7, the menu item elements are displayed on the bottom layer; otherwise, the display level is close to the upper layer, and the level is changed by comparing the zoom threshold to achieve the effect of rotating the menu item elements to be blocked or hidden behind.

[0086] In one embodiment, the rotation menu project is also set to monitor mouse events. Specifically, the method body of configuring the method parameters also includes monitoring mouse events and obtaining mouse position information; judging whether the mouse is suspended on the menu item element based on the mouse position information and the basic information of the menu item element, for example, judging whether the coordinates of the mouse coincide with the coordinates of the menu item element; if so, executing the rotation operation stop instruction.

[0087] The following is an example of an implementation process of this application scheme:

[0088] 1. Create a new Circle Menu project in the Unity3D engine tool, switch to the WebGL publishing platform, and configure the packaging and publishing parameters according to project requirements.

[0089] 2. Import the required menu UI elements and build the scene and interface layout according to the actual project requirements.

[0090] 3. Create a C# script class RingMenuIetm that inherits from MonoBehaviour to define the basic information of the rotating menu item element. The detailed definition is as follows:

[0091]

[0092]

[0093] 4. Mount the RingMenuIetm script class on each menu item element. If it is a dynamically created menu item element, just add the script when generating the menu item.

[0094] 5. Create a new C# script class CircleMenu that inherits from MonoBehaviour to control the rotation of the entire menu and interactive event processing. The following configurable parameters are defined in the script:

[0095] public RingyMenuItem[]menuItems; / / Used to save all menu item elements

[0096] public float radiusX = 1208; / / X axis or horizontal radius

[0097] public float radiusY = 308; / / Y axis or vertical radius

[0098] public float angleSpeed ​​= 2; / / rotation angular speed

[0099] public bool isLockAngleSpeed ​​= false; / / Whether to fix the rotation speed

[0100] public bool isLockZAxis = false; / / Whether to lock the Z axis value, usually check this option for 2D or 2.5D

[0101] public bool isLockScale = false; / / Whether to lock the menu item scale, usually check this option for 3D menu

[0102] public float focalLength = 350; / / Focal length should be larger than the radius in the Y-axis direction

[0103] public float scaleThreshold = 0.7f; / / The scaling threshold of the rotation menu item. When the scale value of the menu item is less than the threshold, whether the rendering level needs to be changed.

[0104] 6. Perform initialization menu operations in the Awake or Start method, including the following operations:

[0105] 6.1. Get or dynamically create all menu item elements and save them to menuItems;

[0106] 6.2. Traverse the menuItems menu item elements, use the three-dimensional space coordinates (XYZ) to initialize and calculate the position and size of each menu item element evenly distributed in the elliptical (circular) track, and perform menu item event monitoring and binding.

[0107] 7. Perform rotation menu control in the Update method, including the following operations:

[0108] 7.1. Monitor mouse events in real time, obtain the mouse position in real time and determine whether the mouse is suspended on the menu item element;

[0109] 7.2. If the mouse hovers over a menu item, the menu stops rotating;

[0110] 7.3. If the mouse is not hovering over a menu item, the menu will continue to rotate. At this time, the menu item elements will be traversed in a loop, and the position and size of each menu item will be calculated using the three-dimensional space coordinates (XYZ) to rotate 360 ​​degrees in an elliptical (circular) orbit around the center point, and the information will be updated to each menu item in real time.

[0111] 8. Menu item event monitoring and processing, such as sending messages or jumping pages after monitoring menu item clicks.

[0112] 9. Mount the CircleMenu script to the scene object and configure the parameters according to actual requirements, such as Figure 2 shown.

[0113] 10. Package and publish it into a WebGL program and embed it into the Web front-end page.

[0114] like Figure 3 As shown, a schematic diagram of the implementation and deployment of the present application solution is provided. A rotating menu project is created based on the Unity3D engine, packaged and published to the WebGL platform, and embedded into the Web front-end page.

[0115] like Figure 4 , shows a schematic diagram of the effect of a Web rotating menu in an embodiment, in which menu item elements such as data development, data sampling, and background analysis rotate around the center.

[0116] It should be pointed out that in the above process, compared with Three.js, which is a WebGL third-party library written in JavaScript, Unity is a cross-platform 3D rendering engine that uses C# for function development and uses WebGL packaging and publishing programs. The underlying engine itself performs conversions. The development languages ​​used by the two are completely different, and thus the implementation methods of the two are completely different.

[0117] On the other hand, the implemented rotation menu opens multiple configuration parameter interfaces, such as rotation track parameters, whether to lock the zoom ratio, etc., and has the characteristics of strong expansibility and high reusability.

[0118] It should be understood that although Figure 1 The steps in the flowchart are shown in sequence as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified in this document, there is no strict order restriction for the execution of these steps, and these steps can be executed in other orders. Moreover, Figure 1 At least part of the steps may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least part of the sub-steps or stages of other steps.

[0119] In one embodiment, a method for displaying a web rotating menu is also provided, including:

[0120] In response to an opening instruction of the Web front-end page, calling a WebGL program embedded in the Web front-end page, wherein the WebGL program is packaged and published to a WebGL publishing platform by the rotating menu project according to a package publishing parameter;

[0121] The rotation menu project is created based on a 3D engine, including importing menu item elements into the rotation menu project, and configuring a first script for executing and displaying each of the menu item elements, defining basic information of the menu item elements in the first script, wherein the basic information at least includes the position in the three-axis directions during the rotation process and the current angle; configuring a second script in the rotation menu project, defining control parameters of the menu item elements in the second script, wherein the control parameters at least include rotation orbit parameters and rotation angular velocity; defining method parameters of the rotation menu project, including configuring the method body of the method parameters including looping through the menu item elements, rotating the menu item elements according to the control parameters of the second script, and updating the basic information of the first script.

[0122] In some embodiments, configuring the second script further includes configuring whether to lock the rotation angular velocity;

[0123] The method body for configuring the method parameters also includes configuring the menu item element to rotate at a constant speed at the set rotational angular velocity if the rotational angular velocity is locked; and configuring the rotational angular velocity to be calculated based on the mouse position and screen width if the rotational angular velocity is not locked.

[0124] In some embodiments, the basic information also includes the scaling ratio during the rotation process; configuring the second script also includes configuring indication information on whether to lock the scaling ratio during the rotation process; the method body for configuring the method parameters also includes looping through the menu item elements, determining the scaling ratio of the menu item elements according to the indication information of the second script, and updating the scaling ratio in the first script.

[0125] Configuring the second script also includes configuring a zoom threshold; the method body for configuring the method parameters also includes determining the current zoom ratio of the menu item element, and if the current zoom ratio is less than the zoom threshold, executing a rendering level change. The method body for configuring the method parameters also includes monitoring mouse events and obtaining mouse position information; judging whether the mouse is hovering over the menu item element based on the mouse position information and the basic information of the menu item element; and if so, executing a rotation operation stop instruction.

[0126] In one embodiment, Figure 5 As shown, a device for implementing a Web rotating menu is provided, including: a 3D engine module and a publishing module, wherein:

[0127] The 3D engine module is used to create a rotating menu project based on the 3D engine, and import menu item elements into the rotating menu project.

[0128] Publishing module, used to switch to the WebGL publishing platform to configure package publishing parameters;

[0129] The 3D engine module includes a first script unit, a second script unit and a method parameter unit, wherein the first script unit is used to configure a first script for executing and displaying each of the menu item elements, and the basic information of the menu item elements is defined in the first script, wherein the basic information at least includes the position in the three-axis directions and the current angle during the rotation process; the second script unit is used to configure a second script in the rotation menu project, and the control parameters of the menu item elements are defined in the second script, wherein the control parameters at least include the rotation track parameters and the rotation angular velocity; the method parameter unit is used to define the method parameters of the rotation menu project, including that the method body for configuring the method parameters includes looping through the menu item elements, rotating the menu item elements according to the control parameters of the second script, and updating the basic information of the first script;

[0130] The publishing unit is also used to package and publish the rotating menu project into a WebGL program according to the packaging and publishing parameters and embed it into a Web front-end page.

[0131] In some embodiments, the control parameters in the second script also include indication information on whether to lock the rotation angular velocity, and the method body for configuring the method parameters also includes configuring the menu item element to rotate at a constant speed at the set rotation angular velocity if the indication information indicates to lock the rotation angular velocity; otherwise, configuring the rotation angular velocity to be calculated based on the mouse position and screen width.

[0132] In some embodiments, the basic information in the first script also includes the zoom ratio during the rotation process, and configuring the second script also includes instruction information for configuring whether to lock the zoom ratio during the rotation process; the method body for configuring the method parameters also includes looping through the menu item elements, determining the zoom ratio of the menu item elements according to the instruction information of the second script, and updating the zoom ratio in the first script.

[0133] Configuring the second script also includes configuring a zoom threshold; the method body of configuring the method parameters also includes determining the current zoom ratio of the menu item element, and if the current zoom ratio is less than the zoom threshold, executing a rendering level change.

[0134] The method body for configuring the method parameters also includes monitoring mouse events and obtaining mouse position information; judging whether the mouse is suspended on the menu item element based on the mouse position information and the basic information of the menu item element; and if so, executing a rotation operation stop instruction.

[0135] The process of defining the rotation orbit parameters involves:

[0136] Define a first axis radius along a first axis direction and a second axis radius along a second axis direction in a three-dimensional coordinate system, wherein the first axis direction and the second axis direction are perpendicular to each other;

[0137] Define a third axis value along the third axis direction in a three-dimensional coordinate system, wherein the third axis direction is perpendicular to the plane where the first axis direction and the second axis direction are located.

[0138] The specific definition of the implementation device of the web rotating menu can be found in the definition of the implementation method of the web rotating menu above, which will not be repeated here. Each module in the implementation device of the web rotating menu can be implemented in whole or in part by software, hardware, or a combination thereof. Each of the above modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to each of the above modules.

[0139] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Figure 6 As shown. The computer device includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a method for implementing a Web rotating menu is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0140] Those skilled in the art will understand that Figure 6 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0141] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the following steps when executing the computer program:

[0142] Create a rotating menu project based on the 3D engine, and switch to the WebGL publishing platform to configure the packaging and publishing parameters;

[0143] Importing menu item elements into the rotation menu project, and configuring a first script for executing and displaying each of the menu item elements, defining basic information of the menu item elements in the first script, wherein the basic information at least includes the position in three-axis directions and the current angle during the rotation process;

[0144] A second script is configured in the rotation menu project, and control parameters of the menu item element are defined in the second script, wherein the control parameters at least include rotation track parameters and rotation angular velocity;

[0145] Defining method parameters of the rotation menu project, including configuring the method body of the method parameters to loop through menu item elements, rotate the menu item elements according to the control parameters of the second script, and update the basic information of the first script;

[0146] The rotating menu project is packaged and published as a WebGL program according to the package publishing parameters and embedded into a Web front-end page.

[0147] In one embodiment, when the processor executes the computer program, the following steps are also implemented:

[0148] The configuring of the second script in the rotation menu project further comprises:

[0149] Configure whether to lock the rotation angular velocity;

[0150] The method body for configuring the method parameters also includes:

[0151] If the rotation angular velocity is locked, the menu item element is configured to rotate at a constant speed at the set rotation angular velocity;

[0152] If the rotation angular velocity is not locked, the rotation angular velocity is calculated based on the mouse position and the screen width.

[0153] In one embodiment, when the processor executes the computer program, the following steps are also implemented:

[0154] The basic information of the menu item element is defined in the first script, and further includes:

[0155] Defines the scaling of menu item elements during rotation;

[0156] The configuring of the second script in the rotation menu project further includes configuring indication information of whether to lock the zoom ratio during the rotation process;

[0157] The method body for configuring the method parameters also includes looping through menu item elements, determining the scaling ratio of the menu item elements according to the instruction information of the second script, and updating the scaling ratio in the first script.

[0158] In one embodiment, when the processor executes the computer program, the following steps are also implemented:

[0159] The configuring of the second script in the rotation menu project further includes configuring a zoom threshold;

[0160] The method body for configuring the method parameters also includes determining a current zoom ratio of the menu item element, and if the current zoom ratio is less than a zoom threshold, performing a rendering level change.

[0161] In one embodiment, when the processor executes the computer program, the following steps are also implemented:

[0162] The method body for configuring the method parameters also includes monitoring mouse events and obtaining mouse position information;

[0163] Determining whether the mouse is hovering over the menu item element according to the mouse position information and the basic information of the menu item element;

[0164] If yes, execute the rotation operation stop instruction.

[0165] In one embodiment, when the processor executes the computer program, the following steps are also implemented:

[0166] The process of defining the rotation orbit parameters involves:

[0167] Define a first axis radius along a first axis direction and a second axis radius along a second axis direction in a three-dimensional coordinate system, wherein the first axis direction and the second axis direction are perpendicular to each other;

[0168] Define a third axis value along the third axis direction in a three-dimensional coordinate system, wherein the third axis direction is perpendicular to the plane where the first axis direction and the second axis direction are located.

[0169] In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:

[0170] Create a rotating menu project based on the 3D engine, and switch to the WebGL publishing platform to configure the packaging and publishing parameters;

[0171] Importing menu item elements into the rotation menu project, and configuring a first script for executing and displaying each of the menu item elements, defining basic information of the menu item elements in the first script, wherein the basic information at least includes the position in three-axis directions and the current angle during the rotation process;

[0172] A second script is configured in the rotation menu project, and control parameters of the menu item element are defined in the second script, wherein the control parameters at least include rotation track parameters and rotation angular velocity;

[0173] Defining method parameters of the rotation menu project, including configuring the method body of the method parameters to loop through menu item elements, rotate the menu item elements according to the control parameters of the second script, and update the basic information of the first script;

[0174] The rotating menu project is packaged and published as a WebGL program according to the package publishing parameters and embedded into a Web front-end page.

[0175] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0176] The configuring of the second script in the rotation menu project further comprises:

[0177] Configure whether to lock the rotation angular velocity;

[0178] The method body for configuring the method parameters also includes:

[0179] If the rotation angular velocity is locked, the menu item element is configured to rotate at a constant speed at the set rotation angular velocity;

[0180] If the rotation angular velocity is not locked, the rotation angular velocity is calculated based on the mouse position and the screen width.

[0181] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0182] The basic information of the menu item element is defined in the first script, and further includes:

[0183] Defines the scaling of menu item elements during rotation;

[0184] The configuring of the second script in the rotation menu project further includes configuring indication information of whether to lock the zoom ratio during the rotation process;

[0185] The method body for configuring the method parameters also includes looping through menu item elements, determining the scaling ratio of the menu item elements according to the instruction information of the second script, and updating the scaling ratio in the first script.

[0186] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0187] The configuring of the second script in the rotation menu project further includes configuring a zoom threshold;

[0188] The method body for configuring the method parameters also includes determining a current zoom ratio of the menu item element, and if the current zoom ratio is less than a zoom threshold, performing a rendering level change.

[0189] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0190] The method body for configuring the method parameters also includes monitoring mouse events and obtaining mouse position information;

[0191] Determining whether the mouse is hovering over the menu item element according to the mouse position information and the basic information of the menu item element;

[0192] If yes, execute the rotation operation stop instruction.

[0193] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0194] The process of defining the rotation orbit parameters involves:

[0195] Define a first axis radius along a first axis direction and a second axis radius along a second axis direction in a three-dimensional coordinate system, wherein the first axis direction and the second axis direction are perpendicular to each other;

[0196] Define a third axis value along the third axis direction in a three-dimensional coordinate system, wherein the third axis direction is perpendicular to the plane where the first axis direction and the second axis direction are located.

[0197] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0198] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0199] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A method for implementing a Web rotating menu, characterized in that: include: Create a rotating menu project based on the 3D engine, and switch to the WebGL publishing platform to configure the packaging and publishing parameters; Importing menu item elements into the rotation menu project, and configuring a first script for executing and displaying each of the menu item elements, defining basic information of the menu item elements in the first script, wherein the basic information at least includes the position in three-axis directions and the current angle during the rotation process; A second script is configured in the rotation menu project, and control parameters of the menu item element are defined in the second script, wherein the control parameters at least include rotation track parameters and rotation angular velocity; Defining method parameters of the rotation menu project, including configuring the method body of the method parameters to loop through menu item elements, rotate the menu item elements according to the control parameters of the second script, and update the basic information of the first script; The rotating menu project is packaged and published as a WebGL program according to the package publishing parameters and embedded into a Web front-end page.

2. The method for implementing a Web rotating menu according to claim 1, characterized in that: The configuring of the second script in the rotation menu project further comprises: Configure whether to lock the rotation angular velocity; The method body for configuring the method parameters also includes: If the rotation angular velocity is locked, the menu item element is configured to rotate at a constant speed at the set rotation angular velocity; If the rotation angular velocity is not locked, the rotation angular velocity is calculated based on the mouse position and the screen width.

3. The method for implementing a Web rotating menu according to claim 1, characterized in that: The basic information of the menu item element is defined in the first script, and further includes: Defines the scaling of menu item elements during rotation; The configuring of the second script in the rotation menu project further includes configuring indication information of whether to lock the zoom ratio during the rotation process; The method body for configuring the method parameters also includes looping through menu item elements, determining the scaling ratio of the menu item elements according to the instruction information of the second script, and updating the scaling ratio in the first script.

4. The method for implementing a Web rotating menu according to claim 3, characterized in that: The configuring of the second script in the rotation menu project further includes configuring a zoom threshold; The method body for configuring the method parameters also includes determining a current zoom ratio of the menu item element, and if the current zoom ratio is less than a zoom threshold, performing a rendering level change.

5. The method for implementing a Web rotating menu according to claim 1, characterized in that: The method body for configuring the method parameters also includes monitoring mouse events and obtaining mouse position information; Determining whether the mouse is hovering over the menu item element according to the mouse position information and the basic information of the menu item element; If yes, execute the rotation operation stop instruction.

6. The method for implementing a Web rotating menu according to claim 1, characterized in that: The process of defining the rotation orbit parameters involves: Define a first axis radius along a first axis direction and a second axis radius along a second axis direction in a three-dimensional coordinate system, wherein the first axis direction and the second axis direction are perpendicular to each other; Define a third axis value along the third axis direction in a three-dimensional coordinate system, wherein the third axis direction is perpendicular to the plane where the first axis direction and the second axis direction are located.

7. A method for displaying a Web rotating menu, characterized in that: include: In response to an opening instruction of the Web front-end page, calling a WebGL program embedded in the Web front-end page, wherein the WebGL program is packaged and published to a WebGL publishing platform by the rotating menu project according to a package publishing parameter; The rotation menu project is created based on a 3D engine, including importing menu item elements into the rotation menu project, and configuring a first script for executing and displaying each of the menu item elements, defining basic information of the menu item elements in the first script, wherein the basic information at least includes the position in the three-axis directions during the rotation process and the current angle; configuring a second script in the rotation menu project, defining control parameters of the menu item elements in the second script, wherein the control parameters at least include rotation orbit parameters and rotation angular velocity; defining method parameters of the rotation menu project, including configuring the method body of the method parameters including looping through the menu item elements, rotating the menu item elements according to the control parameters of the second script, and updating the basic information of the first script.

8. A device for implementing a Web rotating menu, characterized in that: The device comprises: The 3D engine module is used to create a rotating menu project based on the 3D engine, and import menu item elements into the rotating menu project. Publishing module, used to switch to the WebGL publishing platform to configure packaging and publishing parameters; The 3D engine module includes a first script unit, a second script unit and a method parameter unit, wherein the first script unit is used to configure a first script for executing and displaying each of the menu item elements, and the basic information of the menu item elements is defined in the first script, wherein the basic information at least includes the position in the three-axis directions and the current angle during the rotation process; the second script unit is used to configure a second script in the rotation menu project, and the control parameters of the menu item elements are defined in the second script, wherein the control parameters at least include the rotation track parameters and the rotation angular velocity; the method parameter unit is used to define the method parameters of the rotation menu project, including that the method body for configuring the method parameters includes looping through the menu item elements, rotating the menu item elements according to the control parameters of the second script, and updating the basic information of the first script; The publishing unit is also used to package and publish the rotating menu project into a WebGL program according to the packaging and publishing parameters and embed it into a Web front-end page.

9. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images