CN114463496A - Digital twin-based hypertext mark label display method - Google Patents

Abstract

The invention provides a hypertext mark tag display method based on digital twinning, which comprises the steps of storing a hypertext mark tag in a page as a tag object, mapping the hypertext mark tag into a three-dimensional scene during page rendering, realizing data binding and updating of the hypertext mark tag, and adding a DOM event for the hypertext mark tag during tag creation, such as clicking the tag by a mouse to generate a page popup effect; the method can also be linked with other elements in the page, so that the use scene of the three-dimensional scene is more flexible, the display and the operation are more visual, and the interactivity and the operability of the model are further improved.

Description

Digital twinning-based hypertext mark label display method

Technical Field

The invention relates to the technical field of three-dimensional visualization, in particular to a hypertext mark label display method based on digital twins.

Background

With the rapid development of information technology, the use of three-dimensional scenes is wider, and the model can be more intuitively and stereoscopically felt by people, but the method is limited by the complexity of modeling and the uniqueness of the model, so that the use scenes are limited and only static data and the model can be displayed; the hypertext markup tag is used in a page, can flexibly set a style through CSS, flexibly binds a mouse event through JS, and can adapt to various different scenes and page elements required by JS;

at present, the mode of creating texts through WebGL is complex; the created model can only be spliced by various cubes, the material of the model is changed, and the model is single in style; the cost is high and the operation difficulty is high in practical use.

Disclosure of Invention

In view of this, the present invention provides a hypertext markup tag display method based on a digital twin, which stores hypertext markup tags in a page as tag objects, maps the hypertext markup tags into a three-dimensional scene during page rendering, can implement data binding and updating for the hypertext markup tags, and adds DOM events to the hypertext markup tags during tag creation, such as clicking the tags with a mouse to generate a page pop-up effect; the method can also be linked with other elements in the page, so that the use scene of the three-dimensional scene is more flexible, the display and the operation are more visual, and the interactivity and the operability of the model are further improved.

In order to solve the technical problem, the invention provides a hypertext mark label display method based on a digital twin, which comprises the following steps:

1) creating a three-dimensional scene;

2) loading a three-dimensional scene into a page through WebGL for model rendering and display;

3) after the model is loaded successfully, creating a hypertext markup tag, and setting a custom style and an animation effect for the hypertext markup tag through CSS;

4) marking the bound DOM event of the label for the hypertext through JS;

5) adding a hypertext mark label to a model object, introducing a three-dimensional scene world coordinate point or a model in a three-dimensional scene where the hypertext mark label is expected to be located by a user, obtaining world coordinate point position information of the model, obtaining a certain point in a scene world coordinate system where the label needs to be placed, converting the certain point in the three-dimensional world coordinate system into the corresponding certain point in a three-dimensional screen coordinate system through multiple times of conversion, recalculating the three-dimensional screen coordinate system and assigning the three-dimensional screen coordinate system to the hypertext mark label during each rendering, and enabling the label to be located at the certain point in the world coordinate system in the three-dimensional scene all the time.

Further, in step 1), names in the scene can be set as regular names in advance, model objects can be selected regularly subsequently, and labeled model objects are added to the models in batches.

Further, in step 3), the style data is received through the parameters.

Further, in step 4), the specific execution method of the event is introduced in a parameter form when the tag is created, and the type of the event includes mouse click, mouse slide, and mouse double click.

Further, in step 5), the label model object can be selected by regular mode subsequently.

Further, the created hypertext markup tag can still be selected by selecting the Class or the ID of the hypertext markup tag, and data modification, style reconstruction and event binding are performed.

Further, in step 5), the specific conversion relationship is as follows:

(1) converting world coordinates in a three-dimensional scene into a standardized coordinate system through standardized change and cutting; wherein the matrix of the model relative to the world is M, P is a perspective projection normalized variation matrix, V^-1Is the inverse of the camera with respect to the world matrix;

(2) the normalized coordinate system obtained in the step (1); converting from a normalized viewing volume to a three-dimensional screen coordinate system by a viewport transformation, which may be seen as a mapping to the three-dimensional coordinate system, wherein the transformation matrix is:

in the lower left corner of the viewport screen region at (xv)_min,yv_min0), upper right corner is located at (xv)_max,yv_max0), each xy location of the viewport corresponds to a location in the refresh cache.

The technical scheme of the invention has the following beneficial effects:

the invention provides a method for displaying a hypertext mark tag in a three-dimensional scene, which realizes virtual binding of the tag and a model by converting a world coordinate system in the three-dimensional scene into a three-dimensional screen coordinate system, solves the limitation of the use of the model, and reserves the diversity of hypertext mark elements and the flexible operability of events.

The hypertext marking label created by the invention can be selected by selecting the regular grammar of the label model object, the label name is customized, and the operations of displaying, hiding and destroying are carried out on the label name;

according to the method, the zoom value of the hypertext marking label is changed, so that the label and the model are linked, and the large-space sense and the small-space sense are realized; making the hypertext markup tag have the zooming effect of the common model;

the hypertext mark label created by the method can always face to the front, so that the problem of shielding among models is avoided, and the hypertext mark label always faces to the front and is clearly visible;

the hypertext markup tag created by the method can be added with a series of events such as DOM events, mouse sliding, mouse clicking, mouse double clicking and the like, so that the interactivity and operability of the model are further improved, and other models in the scene and other DOM elements in the page can be operated through event acquisition to bind the model and the page together.

Drawings

FIG. 1 is a schematic flow chart of a digital twin-based hypertext markup tag display method of the present invention;

FIG. 2 is a diagram of a first hypertext markup tag in a three-dimensional scene according to the present invention;

FIG. 3 is a diagram illustrating a second HTML tag according to the present invention in a three-dimensional scene;

FIG. 4 is a diagram of the use of the present invention in an actual industrial setting;

FIG. 5 is a diagram illustrating the pop-up effect of the page generated after the tab of FIG. 4 is clicked according to the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to fig. 1 to 5 of the embodiments of the present invention. It is to be understood that the embodiments described are only a few embodiments of the present invention, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the description of the embodiments of the invention given above, are within the scope of protection of the invention.

The three-dimensional scene can make people intuitively know the spatial position information, but the three-dimensional scene has limited use due to the complexity of modeling and the inflexibility of data. The invention is directed to the implementation of hypertext markup tags in three-dimensional scenes;

the specific operating method is given below:

referring to fig. 1, the implementation of hypertext markup tags in three-dimensional scenes includes the following operations:

1) a three-dimensional scene is created by a three-dimensional technician, names in the scene can be set as regular names in advance, model objects can be selected regularly subsequently, and label model objects are added to the models in batches;

2) loading a three-dimensional scene into a page through WebGL for model rendering and display;

3) after the model is loaded successfully, a hypertext markup tag is created, a custom style and an animation effect are set for the hypertext markup tag through the CSS, and style data can be received through parameters, so that the tag is more flexible;

4) marking a binding DOM event of the label for the hypertext through JS, wherein a specific execution method of the event can be transmitted in a parameter form when the label is created; the types of the events comprise mouse clicking, mouse sliding, mouse double clicking and the like;

5) adding a hypertext mark label to a model object (a label model object can be selected regularly subsequently), enabling a user to transmit a world coordinate point of a three-dimensional scene where the hypertext mark label is expected to be located, or transmitting a model in the three-dimensional scene to obtain world coordinate point position information of the model, obtaining a certain point in a scene world coordinate system where the label needs to be placed, converting the certain point in the three-dimensional world coordinate system into a certain point in a corresponding three-dimensional screen coordinate system through multiple times of conversion, recalculating the three-dimensional screen coordinate system during each rendering and assigning the three-dimensional screen coordinate system to the hypertext mark label, and enabling the label to be located at the certain point in the world coordinate system in the three-dimensional scene all the time;

the specific conversion relationship is as follows:

(1) converting world coordinates in a three-dimensional scene into a standardized coordinate system through standardized change and cutting; wherein the matrix of the model relative to the world is M, P is a perspective projection normalized variation matrix, V^-1Is the inverse of the camera with respect to the world matrix;

(2) the normalized coordinate system obtained in the step (1); from a normalized viewing volume, through a viewport transformation into a three-dimensional screen coordinate system, which can be viewed as a three-dimensional coordinate system

A mapping of the system, wherein the transformation matrix is:

in the lower left corner of the viewport screen region at (xv)_min,yv_min0), upper right corner is located

Each xy location of the viewport corresponds to a location in the refresh cache.

Referring to fig. 2, fig. 3 shows the style of two hypertext markup tags set by the present invention, no position information is transmitted, the tag position is a default three-dimensional scene origin, and text data information in the tags can be transmitted or updated;

referring to fig. 4, in an industrial scene, the actual use of the tags is performed, the corresponding tags are generated according to the model names and the data is bound, the style can be customized, the click event is bound to the tags, after the click event is clicked, as shown in fig. 5, the specific information corresponding to the model is displayed, and the rendering is dynamically obtained during the click.

While the foregoing is directed to the preferred embodiment of the present invention, it will be understood by those skilled in the art that various changes and modifications may be made without departing from the spirit and scope of the invention as defined in the appended claims.

Claims (7)

1. A hypertext mark label display method based on digital twin is characterized in that: the method comprises the following steps:

1) creating a three-dimensional scene;

2) loading a three-dimensional scene into a page through WebGL for model rendering and display;

3) after the model is loaded successfully, creating a hypertext markup tag, and setting a custom style and an animation effect for the hypertext markup tag through CSS;

4) marking the bound DOM event of the label for the hypertext through JS;

5) adding a hypertext mark label to a model object, introducing a three-dimensional scene world coordinate point or a model in a three-dimensional scene where the hypertext mark label is expected to be located by a user, obtaining world coordinate point position information of the model, obtaining a certain point in a scene world coordinate system where the label needs to be placed, converting the certain point in the three-dimensional world coordinate system into the corresponding certain point in a three-dimensional screen coordinate system through multiple times of conversion, recalculating the three-dimensional screen coordinate system and assigning the three-dimensional screen coordinate system to the hypertext mark label during each rendering, and enabling the label to be located at the certain point in the world coordinate system in the three-dimensional scene all the time.

2. The digital twin-based hypertext markup tag display method according to claim 1, characterized in that: in the step 1), names in the scene can be set as regular names in advance, model objects can be selected regularly subsequently, and labeled model objects are added to the models in batches.

3. The digital twin-based hypertext markup tag display method according to claim 1, characterized in that: in step 3), the style data is received through the parameters.

4. The digital twin-based hypertext markup tag display method according to claim 1, characterized in that: in step 4), the specific execution method of the event is transmitted in a parameter form when the label is created, and the type of the event comprises mouse click, mouse sliding and mouse double click.

5. The digital twin-based hypertext markup tag display method according to claim 1, characterized in that: in step 5), the label model object can be selected by regular mode subsequently.

6. The digital twin-based hypertext markup tag display method according to claim 1, characterized in that: the created hypertext markup tag can still be selected by selecting the Class or the ID of the hypertext markup tag, and data modification, style reconstruction and event binding are carried out.

7. The digital twin-based hypertext markup tag display method according to claim 1, characterized in that: in step 5), the specific conversion relationship is as follows:

(1) converting world coordinates in a three-dimensional scene into a standardized coordinate system through standardized change and cutting; wherein the matrix of the model relative to the world is M, P is a perspective projection normalized variation matrix, V^-1Is the inverse of the camera with respect to the world matrix;

(2) the normalized coordinate system obtained in the step (1); from a normalized viewing volume, through a viewport transformation into a three-dimensional screen coordinate system, which viewport transformation can be viewed as being directed into the three-dimensional coordinate system

Mapping, wherein the transformation matrix is:

in the lower left corner of the viewport screen region at (xv)_min,yv_min0), upper right corner is located

Each xy location of the viewport corresponds to a location in the refresh cache.

Images