Method and device for displaying two-dimensional icon in three-dimensional scene

Abstract

The invention relates to the technical field of three-dimensional modeling, and provides a method and device for displaying a two-dimensional icon in a three-dimensional scene. According to the method, a target two-dimensional icon associated with a target entity is added in a three-dimensional configuration model, a virtual three-dimensional scene is constructed in the three-dimensional configuration model, attributes of the target two-dimensional icon are edited in the virtual three-dimensional scene, and then the target two-dimensional icon and the attributes of the target two-dimensional icon are sent to a three-dimensional scene previewer together. The conversion attribute information and the extension attribute information of the target two-dimensional icon are displayed on the basis of the conversion attribute and the extension attribute of the received target two-dimensional icon in the three-dimensional scene previewer, and the dynamic attribute information of the target two-dimensional icon is displayed on the basis of a dynamic attribute matching result received from the server; therefore, the two-dimensional icon can be efficiently and flexibly displayed in the three-dimensional scene.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of three-dimensional modeling, and in particular to a method and device for displaying a two-dimensional icon in a three-dimensional scene. BACKGROUND

[0002] Currently, all solutions for displaying static information in a 3D (three-dimensional) scene on the market use a Canvas drawing method to generate a 3D texture map, which is then pasted on a plane in the 3D scene. More specifically, the existing technical solutions all use a Canvas drawing method, and a browser provides a Canvas API (Application Programming Interface) to allow users to draw various graphics on a front-end page, such as text, rectangles, ellipses, pictures, and the like. This method is used for drawing 2D (two-dimensional) drawings and icons. To display a 2D icon in a 3D scene, a 3D texture mapping technology is used to display the 2D Canvas-drawn graphics as a 3D texture picture pasted on a plane in the scene.

[0003] This method has the following design defects: a large amount of icon rendering memory is occupied, which affects the 3D scene rendering frame rate; the display picture is blurred and unclear; there is no interaction at a detailed level; and native DOM (Document Object Model) elements cannot be drawn. These design defects greatly limit the use and effect of icons in a 3D scene, and make icon rendering only meet a small part of the demand, greatly limiting the design of more flexible icons and user-side customized icons. SUMMARY

[0004] Therefore, the embodiments of the present application provide a method and device for displaying a two-dimensional icon in a three-dimensional scene, to solve the problem that a two-dimensional icon cannot be efficiently and flexibly displayed in a three-dimensional scene in the prior art.

[0005] In a first aspect, the embodiments of the present application provide a method for displaying a two-dimensional icon in a three-dimensional scene, comprising:

[0006] adding a target two-dimensional icon in a three-dimensional configuration model, the target two-dimensional icon being associated with a target entity in the three-dimensional configuration model;

[0007] constructing a virtual three-dimensional scene in the three-dimensional configuration model, the virtual three-dimensional scene having the same spatial transformation and perspective relationship as the three-dimensional configuration model;

[0008] editing properties of the target two-dimensional icon in the virtual three-dimensional scene, the properties including at least one of a transformation property, an extension property, and a dynamic property;

[0009] send the target two-dimensional icon and the attribute of the target two-dimensional icon to a three-dimensional scene previewer to display the target two-dimensional icon and the attribute information of the target two-dimensional icon;

[0010] The three-dimensional scene previewer displays the transformation attribute information and the extended attribute information based on the transformation attribute and the extended attribute received from the virtual three-dimensional scene, and displays the dynamic attribute information based on the dynamic attribute matching result received from the server.

[0011] In a second aspect, the embodiment of the present application provides a device for displaying a two-dimensional icon in a three-dimensional scene, comprising:

[0012] an adding module configured to add a target two-dimensional icon in a three-dimensional configuration model, the target two-dimensional icon being associated with a target entity in the three-dimensional configuration model;

[0013] a constructing module configured to construct a virtual three-dimensional scene in the three-dimensional configuration model, the virtual three-dimensional scene having the same spatial transformation and perspective relationship as the three-dimensional configuration model;

[0014] an editing module configured to edit an attribute of the target two-dimensional icon in the virtual three-dimensional scene, the attribute comprising at least one of a transformation attribute, an extended attribute and a dynamic attribute;

[0015] a previewing module configured to send the target two-dimensional icon and the attribute of the target two-dimensional icon to a three-dimensional scene previewer to display the target two-dimensional icon and the attribute information of the target two-dimensional icon;

[0016] The three-dimensional scene previewer displays the transformation attribute information and the extended attribute information based on the transformation attribute and the extended attribute received from the virtual three-dimensional scene, and displays the dynamic attribute information based on the dynamic attribute matching result received from the server.

[0017] Compared with the prior art, the embodiment of the present application has the beneficial effects that: the embodiment of the present application adds a target two-dimensional icon associated with a target entity in a three-dimensional configuration model, constructs a virtual three-dimensional scene in the three-dimensional configuration model, edits an attribute of the target two-dimensional icon in the virtual three-dimensional scene, and then sends the target two-dimensional icon and the attribute of the target two-dimensional icon to a three-dimensional scene previewer to display the transformation attribute information and the extended attribute information of the target two-dimensional icon based on the received transformation attribute and the extended attribute of the target two-dimensional icon in the three-dimensional scene previewer, and display the dynamic attribute information of the target two-dimensional icon based on the dynamic attribute matching result received from the server, thereby realizing efficient and flexible display of a two-dimensional icon in a three-dimensional scene. BRIEF DESCRIPTION OF DRAWINGS

[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the embodiments or prior art description will be briefly introduced. Obviously, the drawings in the following description only constitute some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor.

[0019] Figure 1 is a flowchart of a method for displaying a two-dimensional icon in a three-dimensional scene provided by an embodiment of the present application.

[0020] Figure 2 is a flowchart of a method for constructing a virtual three-dimensional scene in a three-dimensional configuration model provided by an embodiment of the present application.

[0021] Figure 3 is a flowchart of a method for editing properties of a target two-dimensional icon in a virtual three-dimensional scene provided by an embodiment of the present application.

[0022] Figure 4 is a flowchart of a method for editing transformation properties and extension properties in a virtual three-dimensional scene provided by an embodiment of the present application.

[0023] Figure 5 is a flowchart of a method for performing instantiation operation on a target two-dimensional icon and editing dynamic properties in an instance of the target two-dimensional icon provided by an embodiment of the present application.

[0024] Figure 6 is a flowchart of a method for sending a target two-dimensional icon and properties of the target two-dimensional icon to a three-dimensional scene previewer to display the target two-dimensional icon and the property information of the target two-dimensional icon provided by an embodiment of the present application.

[0025] Figure 7 is a signal interaction diagram of a method for displaying a two-dimensional icon in a three-dimensional scene provided by an embodiment of the present application.

[0026] Figure 8 is a schematic diagram of an interface for editing transformation properties and extension properties in a three-dimensional scene editor provided by an embodiment of the present application.

[0027] Figure 9 is a system architecture diagram of a method for displaying a two-dimensional icon in a three-dimensional scene provided by an embodiment of the present application.

[0028] Figure 10 is a schematic diagram of a device for displaying a two-dimensional icon in a three-dimensional scene provided by an embodiment of the present application.

[0029] Figure 11 is a schematic diagram of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0030] In the following description, for purposes of explanation and not limitation, specific details are set forth such as particular architectures, techniques, etc. in order to provide a thorough understanding of the embodiments of the present application. However, it will be apparent to those skilled in the art that the present application can be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known methods, devices, and circuits are omitted so as not to obscure the description of the present application with unnecessary detail.

[0031] A method and apparatus for displaying a two-dimensional icon in a three-dimensional scene according to embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0032] As mentioned above, the conventional method for displaying static information in a 3D scene has the design defects of large icon rendering memory occupation, which affects the 3D scene rendering frame rate, blurred and unclear display, lack of interaction at detailed places, and does not support the drawing of native DOM elements.

[0033] Specifically, for the existing 3D icon rendering technology, since the icon is presented in the form of a texture map in the 3D scene, the size of the icon should not be too large. A too large icon size will result in a larger texture map size, thereby occupying more memory space, and a too large map size will also affect the scene frame rate during rendering. A smaller icon will also have the problem of blurred and unclear rendering texture, which cannot be clearly seen, because the texture size is small and the icon displayed in the scene is also small.

[0034] At the same time, since a larger texture map size cannot be used, the number of icons in the scene is also limited. Too many icons will increase the memory occupation and slow down the rendering update, thus having a certain impact on the frame rate and also having a certain limitation on the number of icon drawings.

[0035] Moreover, since the icon rendering exists in the form of a texture map in the 3D scene, the event interaction of multiple primitives inside the icon cannot be responded, because the icon has been rendered as a picture in the 3D scene at this time, and the things on the picture cannot be event-interacted.

[0036] In addition, for displaying chart-type icons in a 3D scene, the existing scheme cannot support it. This is because the existing scheme cannot convert DOM elements into a texture map in a 3D scene, and even if such conversion is achieved, it will also consume too much and cause frame rate delay, which cannot be used in a production environment.

[0037] In view of this, the embodiment of the present application provides a method for displaying a two-dimensional icon in a three-dimensional scene, adding a target two-dimensional icon associated with a target entity in a three-dimensional configuration model, constructing a virtual three-dimensional scene in the three-dimensional configuration model, editing the attribute of the target two-dimensional icon in the virtual three-dimensional scene, and then sending the target two-dimensional icon and the attribute of the target two-dimensional icon to a three-dimensional scene previewer, so as to display the transformation attribute information and the extended attribute information of the target two-dimensional icon in the three-dimensional scene previewer based on the received transformation attribute and the extended attribute of the target two-dimensional icon, and display the dynamic attribute information of the target two-dimensional icon based on the dynamic attribute matching result received from the server, thereby realizing efficient and flexible display of the two-dimensional icon in the three-dimensional scene.

[0038] Figure 1 FIG. 1 is a flowchart of a method for displaying a two-dimensional icon in a three-dimensional scene according to an embodiment of the present application. As shown in FIG. 1, the method comprises the following steps: Figure 1

[0039] In step S101, a target two-dimensional icon is added in a three-dimensional configuration model.

[0040] In the embodiment of the present application, the target two-dimensional icon is associated with a target entity in the three-dimensional configuration model.

[0041] In step S102, a virtual three-dimensional scene is constructed in the three-dimensional configuration model.

[0042] In the embodiment of the present application, the virtual three-dimensional scene has the same spatial transformation and perspective relationship as the three-dimensional configuration model.

[0043] In step S103, the attribute of the target two-dimensional icon is edited in the virtual three-dimensional scene.

[0044] In the embodiment of the present application, the attribute comprises at least one of a transformation attribute, an extended attribute and a dynamic attribute.

[0045] In step S104, the target two-dimensional icon and the attribute of the target two-dimensional icon are sent to a three-dimensional scene previewer, so as to display the target two-dimensional icon and the attribute information thereof.

[0046] In the embodiment of the present application, the three-dimensional scene previewer displays the transformation attribute information and the extended attribute information based on the received transformation attribute and the extended attribute from the virtual three-dimensional scene, and the three-dimensional scene previewer displays the dynamic attribute information based on the dynamic attribute matching result received from the server.

[0047] In some embodiments of the present application, the method can be executed by a terminal device with certain processing capability.

[0048] ​In some embodiments of the present application, a three-dimensional configuration model can be constructed in advance, and the three-dimensional configuration model has at least one entity. A target two-dimensional icon can be added to the three-dimensional configuration model, and the target two-dimensional icon can be associated with a target entity in the three-dimensional configuration model. That is, the target two-dimensional icon can correspond to one or more entities in the three-dimensional configuration model.

[0049] For example, the three-dimensional configuration model can include N temperature sensors and M mechanical arms, where each temperature sensor can correspond to a two-dimensional icon, and the M mechanical arms are a group of control devices, and the whole corresponds to an icon. N and M are positive integers.

[0050] A virtual three-dimensional scene can be constructed in the three-dimensional configuration model, and the virtual three-dimensional scene has the same spatial transformation and perspective relationship as the three-dimensional configuration model. That is, the virtual three-dimensional scene and the three-dimensional configuration model have the same coordinate axis and perspective, and the positions and perspectives of the entities in the virtual three-dimensional scene and the three-dimensional configuration model are also the same.

[0051] The properties of the target two-dimensional icon can be edited in the virtual three-dimensional scene, where the properties of the target two-dimensional icon can include at least one of transformation properties, extension properties, and dynamic properties.

[0052] In some embodiments of the present application, after the properties of the target two-dimensional icon are edited, the target two-dimensional icon and its properties can be sent to a three-dimensional scene previewer together to display the target two-dimensional icon and its property information in the three-dimensional scene previewer.

[0053] In an example, the three-dimensional scene previewer can display transformation property information and extension property information based on the transformation properties and the extension properties received from the virtual three-dimensional scene. In another example, the three-dimensional scene previewer can also display dynamic property information based on the dynamic property matching result received from the server.

[0054] According to the technical scheme provided by the embodiments of the present application, by adding a target two-dimensional icon associated with a target entity in a three-dimensional configuration model, constructing a virtual three-dimensional scene in the three-dimensional configuration model, editing the properties of the target two-dimensional icon in the virtual three-dimensional scene, and then sending the target two-dimensional icon and the properties of the target two-dimensional icon to a three-dimensional scene previewer together, displaying the transformation property information and the extension property information of the target two-dimensional icon based on the received transformation properties and the extension properties of the target two-dimensional icon in the three-dimensional scene previewer, and displaying the dynamic property information of the target two-dimensional icon based on the dynamic property matching result received from the server, the two-dimensional icon can be efficiently and flexibly displayed in the three-dimensional scene.

[0055] Figure 2 FIG. 1 is a flowchart of a method for constructing a virtual three-dimensional scene in a three-dimensional configuration model according to an embodiment of the present application. As shown in FIG. 1, the method includes the following steps.Figure 2 As shown in the figure, the method comprises the following steps:

[0056] In step S201, a virtual three-dimensional scene is constructed on the three-dimensional configuration model by using a Cascading Style Sheets (CSS) spatial transformation Application Programming Interface (API).

[0057] In step S202, a virtual camera is added to the virtual three-dimensional scene, so that the virtual three-dimensional scene and the three-dimensional configuration model have the same spatial transformation and perspective relationship.

[0058] In some embodiments of the present application, a virtual three-dimensional scene can be constructed on the three-dimensional configuration model by using a spatial transformation API provided by CSS. The CSS spatial transformation API can include various properties starting with transform, such as transform-origine, perspective, matrix3d, etc. The virtual three-dimensional scene is used to store the target two-dimensional icon.

[0059] In some embodiments, a virtual camera can also be added to the virtual three-dimensional scene, and the virtual camera can also be added by using the CSS spatial transformation. In this way, the constructed virtual three-dimensional scene and the three-dimensional configuration model have the same spatial transformation and perspective relationship.

[0060] Figure 3 FIG. 1 is a flow diagram of a method for editing properties of a target two-dimensional icon in a virtual three-dimensional scene according to an embodiment of the present application. As shown in the figure, the method comprises the following steps: Figure 3 As shown in the figure, the method comprises the following steps:

[0061] In step S301, the transformation property and the extension property are edited in the virtual three-dimensional scene.

[0062] In step S302, the target two-dimensional icon is instantiated, and the dynamic property is edited in the instance of the target two-dimensional icon.

[0063] In some embodiments of the present application, editing the properties of the target two-dimensional icon in the virtual three-dimensional scene can be, first editing the transformation property and the extension property in the virtual three-dimensional scene, then instantiating the target two-dimensional icon, and editing the dynamic property in the instance of the target two-dimensional icon.

[0064] Figure 4 FIG. 2 is a flow diagram of a method for editing the transformation property and the extension property in the virtual three-dimensional scene according to an embodiment of the present application. As shown in the figure, the method comprises the following steps: Figure 4 As shown in the figure, the method comprises the following steps:

[0065] In step S401, a document object model (DOM) of a virtual three-dimensional scene is acquired.

[0066] In step S402, a target node corresponding to a target two-dimensional icon in the DOM of the virtual three-dimensional scene is determined.

[0067] In step S403, a parent node of the target node is converted to a three-dimensional configuration model through a CSS space transformation API, and a transformation attribute and an extension attribute of the parent node are edited in the three-dimensional configuration model.

[0068] In some embodiments of the present application, editing the transformation attribute and the extension attribute in the virtual three-dimensional scene can include acquiring a document object model (DOM) of a virtual three-dimensional scene, determining a target node corresponding to a target two-dimensional icon in the DOM of the virtual three-dimensional scene, and converting a parent node of the target node to a three-dimensional configuration model through a CSS space transformation API, and editing a transformation attribute and an extension attribute of the parent node in the three-dimensional configuration model.

[0069] Figure 5 FIG. 1 is a flowchart of a method for instantiating a target two-dimensional icon and editing dynamic attributes in an instance of the target two-dimensional icon according to an embodiment of the present application. As shown in FIG. 1, the method includes the following steps: Figure 5

[0070] In step S501, the target two-dimensional icon is instantiated in a virtual three-dimensional scene, and dynamic attribute information of the target two-dimensional icon is acquired.

[0071] In step S502, the dynamic attribute information is added to the instance of the target two-dimensional icon.

[0072] In some embodiments of the present application, instantiating the target two-dimensional icon and editing dynamic attributes in the instance of the target two-dimensional icon can include instantiating the target two-dimensional icon in a virtual three-dimensional scene, and acquiring dynamic attribute information of the target two-dimensional icon, and then adding the dynamic attribute information to the instance of the target two-dimensional icon.

[0073] Figure 6 FIG. 2 is a flowchart of a method for sending a target two-dimensional icon and attributes of the target two-dimensional icon to a three-dimensional scene previewer to display the target two-dimensional icon and attribute information of the target two-dimensional icon according to an embodiment of the present application. As shown in FIG. 2, the method includes the following steps: Figure 6

[0074] In step S601, the instance of the target two-dimensional icon is sent to the three-dimensional scene previewer.

[0075] The instance of the target two-dimensional icon includes attributes of the target two-dimensional icon.

[0076] ​​In step S602, the three-dimensional scene previewer renders an instance of the target two-dimensional icon to display the transformation attribute information.

[0077] In step S603, the three-dimensional scene previewer performs extended attribute logic to display the extended attribute information.

[0078] In step S604, the three-dimensional scene previewer sends the dynamic attribute to the server.

[0079] In step S605, the receiving server sends feedback information, and based on the feedback information, the corresponding dynamic attribute information is determined and displayed.

[0080] In some embodiments of the present application, sending the target two-dimensional icon and the attribute of the target two-dimensional icon to the three-dimensional scene previewer to display the target two-dimensional icon and its attribute information can be, first sending an instance of the target two-dimensional icon to the three-dimensional scene previewer, and then rendering the instance of the target two-dimensional icon by the three-dimensional scene previewer to display the transformation attribute information. The three-dimensional scene previewer can also perform extended attribute logic to display the extended attribute information. In addition, the three-dimensional scene previewer can also send the dynamic attribute to the server, and receive the feedback information sent by the server to determine and display the corresponding dynamic attribute information based on the feedback information.

[0081] In an example, the transformation attribute at least includes position information, rotation information and scaling information of the target two-dimensional icon. After receiving the instance of the target two-dimensional icon, the three-dimensional scene previewer can render the instance to display the position information, rotation information and scaling information of the target two-dimensional icon.

[0082] For example, if the target entity is a temperature sensor, the transformation attribute can be the position information, rotation information and scaling information of the two-dimensional icon of the temperature sensor in the three-dimensional configuration modeling, and the three-dimensional scene previewer can display the two-dimensional icon of the temperature sensor entity at the corresponding rotation angle and scaling ratio.

[0083] On the other hand, the extended attribute at least includes custom display information of the target two-dimensional icon, and the three-dimensional scene previewer can also obtain and display the custom display information from the received instance of the target two-dimensional icon.

[0084] Still taking the temperature sensor as an example, if the user customizes the display information "abc" in the extended attribute of the target two-dimensional icon, the three-dimensional scene previewer can also display the information "abc" in the two-dimensional icon of the temperature sensor entity.

[0085] In still another aspect, the dynamic attribute at least includes interaction information, which at least includes an execution condition. The three-dimensional scene previewer can establish a socket connection with the server and send the execution condition to the server. The server determines whether the current data satisfies the execution condition and generates feedback information according to the determination result. The feedback information at least includes execution mode information corresponding to the execution condition.

[0086] In an example, if the server determines that the current data satisfies the execution condition, the feedback information can be sent to the three-dimensional scene previewer, so that the three-dimensional scene previewer displays the dynamic attribute information in the execution mode included in the feedback information. In another example, if the server determines that the current data does not satisfy the execution condition, the three-dimensional scene previewer can be fed back empty information or other prompt information, so that the three-dimensional scene previewer still displays the dynamic attribute information in the existing mode.

[0087] Still taking the target entity as an example, if the execution condition is that the temperature is higher than 80℃, and the execution mode corresponding to the execution condition is to display the temperature value in red font, when the server determines that the temperature collected by the temperature sensor satisfies the condition of being higher than 80℃, the feedback information including the execution mode information can be fed back to the three-dimensional scene previewer, and the three-dimensional scene previewer displays the temperature value of the temperature sensor in red font after receiving the feedback information.

[0088] The technical scheme provided by the embodiments of the present application changes these attributes of the icon host node to make the icon fuse into the 3D scene. However, this fusion mode may have the problem that the icon is always displayed on the upper layer of the scene and cannot correctly display the occlusion relationship.

[0089] Therefore, before displaying each dynamic attribute information, the three-dimensional scene previewer can call the underlying engine to use ray detection to determine whether there is a model entity between the virtual camera and the target two-dimensional icon; if yes, the target two-dimensional icon is hidden; if not, the target two-dimensional icon is displayed.

[0090] That is, the underlying engine can control the display and hiding of the icon by detecting whether the position of each frame of the icon is occluded. For example, ray detection is performed between the two-dimensional icon and the virtual camera using a ray, and if there is a model entity between the virtual camera and the two-dimensional icon, it is considered to be occluded and needs to be hidden, otherwise it is not occluded and needs to be displayed.

[0091] Figure 7 is a signal interaction diagram of the method for displaying a two-dimensional icon in a three-dimensional scene provided by the embodiments of the present application. As shown in Figure 7As shown, the signal module of the method can include an icon resource management module, a three-dimensional scene editor module, a three-dimensional scene previewer module, and a backend server. The icon resource in the icon resource management module can be dragged to the three-dimensional scene editor first, i.e., the user can drag the icon from the resource bar to the three-dimensional scene editor. The three-dimensional scene editor converts the dragged icon into a scene icon and establishes a link between the three-dimensional entity and the icon. Then the icon is added to the virtual scene for icon instantiation rendering. The transformation properties of the icon can be adjusted, including adjusting the position, rotation, and scaling of the icon entity, so as to adapt the icon to the current scene.

[0092] Meanwhile, the extended properties, which can also be referred to as data binding properties, can also be edited in the three-dimensional scene editor to modify the related properties inside the icon.

[0093] Figure 8 is a schematic diagram of an interface for editing transformation properties and extended properties in a three-dimensional scene editor provided by an embodiment of the present application. As shown, Figure 8 The position information, rotation information, and scaling information of the two-dimensional icon can be edited in the "transformation" bar, and the display information can also be customized in the "extended properties" bar.

[0094] In addition, the icon instantiation operation can also be performed in the three-dimensional scene editor to bind the data source point, which can be the data source of the entity corresponding to the icon. Taking the icon corresponding to the temperature sensor as an example, the data source point can be the real-time temperature output by the temperature sensor entity.

[0095] After the data editing is completed, the editing result can be saved and the scene previewed. During the scene preview, the three-dimensional scene previewer can perform data binding modification logic and send the dynamic properties to the backend server.

[0096] In an example, the communication connection between the three-dimensional scene previewer and the backend server can be established through a web socket, and the backend server can read the dynamic properties bound by the current drawing. If the backend server judges that the dynamic properties need to be executed according to the execution conditions, the execution conditions of the dynamic properties are sent to the three-dimensional scene previewer on the front end, and the three-dimensional scene previewer forwards the execution conditions to the corresponding icon instance. After receiving the data, the corresponding icon instance executes the dynamic property logic.

[0097] That is, the technical solution provided by the embodiments of the present application firstly constructs a virtual scene DOM on a three-dimensional scene layer using a CSS space transformation API, and the virtual scene DOM is designed to store two-dimensional icons. Then a virtual camera is added, which can also be implemented by a CSS space transformation method. At this time, the virtual scene and the virtual camera already exist, and the two-dimensional icons can be placed in them. The virtual scene and the three-dimensional scene maintain the same space transformation and have the same perspective relationship.

[0098] Each two-dimensional icon has a parent node, which is converted into a three-dimensional scene by a CSS space transformation API, and the position, rotation and scaling are modified by a three-dimensional scene model attribute.

[0099] At this time, the icon can be rendered in the three-dimensional scene, and the three-dimensional scene acts as a container for the rendering of the icon itself. The two-dimensional icon itself exposes some internal attribute APIs to the three-dimensional scene for use. Through such APIs, the three-dimensional scene and the two-dimensional icon can interact and set attributes.

[0100] Figure 9 is a system architecture diagram for implementing the method for displaying two-dimensional icons in a three-dimensional scene provided by the embodiments of the present application. As shown in Figure 9 The system includes a three-dimensional configuration model, a three-dimensional virtual scene, an icon entity and a two-dimensional icon, wherein the two-dimensional icon can perform operations such as static display, data binding, dynamic attribute configuration and event definition.

[0101] The three-dimensional configuration model can manage the three-dimensional virtual scene, the icon entity can deliver editable information to the two-dimensional icon by delivering events, modifying binding data and sending dynamic attributes, and the three-dimensional virtual scene is used to carry the two-dimensional icon.

[0102] The system breaks the original design of the three-dimensional scene icon rendering scheme, and uses the space transformation API provided by the CSS style. Such API includes various properties starting with transform, including transform-origine, perspective, matrix3d, etc. By changing these properties of the icon host node, the icon is integrated into the three-dimensional scene. However, for such integration, there is a problem that the icon is always displayed on the upper layer of the scene, and there is no correct occlusion relationship. Therefore, in the design, the underlying engine controls the display and hiding of the icon by detecting whether the icon is occluded every frame. Specifically, a ray is used to detect the ray between the icon and the camera. If there is a model entity between the camera and the icon, it is considered to be occluded and needs to be hidden, otherwise it is not occluded and needs to be displayed.

[0103] For the modification of the data binding data of the two-dimensional figure data, when the figure is instantiated, the two-dimensional figure exposes the related attributes to the outside, allowing the outside, such as the three-dimensional scene, to modify the data, and for this, the three-dimensional scene figure entity records all the modified data, and when the scene is previewed, the API provided by the two-dimensional figure is called to modify.

[0104] When the two-dimensional figure is edited, the primitives in the two-dimensional figure can add dynamic attributes, and such dynamic attributes depend on the two-dimensional figure to run, and by constructing such a running environment when the three-dimensional scene is rendered, the dynamic attributes of the two-dimensional figure can run in the three-dimensional scene. Specifically, in the three-dimensional scene, the figure is instantiated to obtain the dynamic attributes of the figure itself, the dynamic attributes are read and saved by the editor, and when previewed, the data of the figure entity in the three-dimensional scene drawing is read and analyzed by the server to determine which dynamic attribute meets the execution condition, and thereafter the dynamic attribute meeting the execution condition is transmitted to the front end for processing, and after receiving the data, the front-end three-dimensional scene transmits the data to the figure through the interface between the figure and the three-dimensional scene, and the figure performs final logical judgment processing after obtaining the data.

[0105] For the figure in the three-dimensional scene, the internal event definition processing also needs to be supported, and since the rendering of the figure in the three-dimensional scene does not change its original structure, the native event rendering of the index figure will not be destroyed and can be normally used and responded.

[0106] By using the technical scheme provided by the embodiment of the application, the original DOM is used to make space transformation, the scene fusion in vision is met, the figure rendering performance is improved, the rendering quantity is improved, and a higher frame rate is obtained, and at the same time, the data binding real-time update is supported, the dynamic attribute is normally executed, and the event definition is normally executed. Compared with the original solution, the technical scheme has a wider figure adaptation degree, supports embedding any figure into a three-dimensional scene, and has a higher frame rate than the original technical scheme.

[0107] All the optional technical schemes described above can be combined to form optional embodiments of the application, which will not be described here.

[0108] The following is an apparatus embodiment of the application, which can be used to execute the method embodiments of the application. For details not disclosed in the apparatus embodiments of the application, please refer to the method embodiments of the application.

[0109] Figure 10 is a schematic diagram of a device for displaying a two-dimensional figure in a three-dimensional scene provided by an embodiment of the application. As shown in Figure 10 The device comprises:

[0110] The adding module 1001 is configured to add a target two-dimensional figure in a three-dimensional configuration model, and the target two-dimensional figure is associated with a target entity in the three-dimensional configuration model.

[0111] The construction module 1002 is configured to construct a virtual three-dimensional scene in the three-dimensional configuration model, and the virtual three-dimensional scene has the same spatial transformation and perspective relationship as the three-dimensional configuration model.

[0112] The editing module 1003 is configured to edit the properties of the target two-dimensional icon in the virtual three-dimensional scene, and the properties include at least one of the transformation properties, the extension properties, and the dynamic properties.

[0113] The preview module 1004 is configured to send the target two-dimensional icon and the properties of the target two-dimensional icon to a three-dimensional scene previewer to display the target two-dimensional icon and the property information thereof.

[0114] The three-dimensional scene previewer displays the transformation property information and the extension property information based on the transformation properties and the extension properties received from the virtual three-dimensional scene, and displays the dynamic property information based on the dynamic property matching result received from the server.

[0115] According to the technical scheme provided in the embodiments of the present application, the target two-dimensional icon associated with the target entity is added in the three-dimensional configuration model, the virtual three-dimensional scene is constructed in the three-dimensional configuration model, the properties of the target two-dimensional icon are edited in the virtual three-dimensional scene, and then the target two-dimensional icon and the properties of the target two-dimensional icon are sent to the three-dimensional scene previewer, so as to display the transformation property information and the extension property information of the target two-dimensional icon based on the received transformation properties and extension properties of the target two-dimensional icon in the three-dimensional scene previewer, and display the dynamic property information of the target two-dimensional icon based on the dynamic property matching result received from the server, thereby realizing efficient and flexible display of the two-dimensional icon in the three-dimensional scene.

[0116] In some embodiments, the virtual three-dimensional scene is constructed in the three-dimensional configuration model, including: constructing the virtual three-dimensional scene on the upper layer of the three-dimensional configuration model by using a Cascading Style Sheets (CSS) spatial transformation Application Programming Interface (API); and adding a virtual camera in the virtual three-dimensional scene, so that the virtual three-dimensional scene has the same spatial transformation and perspective relationship as the three-dimensional configuration model.

[0117] In some embodiments, the properties of the target two-dimensional icon are edited in the virtual three-dimensional scene, including: editing the transformation properties and the extension properties in the virtual three-dimensional scene; and performing instantiation operation on the target two-dimensional icon, and editing the dynamic properties in the instance of the target two-dimensional icon.

[0118] In some embodiments, the transformation attribute and the extended attribute are edited in the virtual three-dimensional scene, including: obtaining a document object model (DOM) of the virtual three-dimensional scene; determining a target node corresponding to a target two-dimensional icon in the DOM of the virtual three-dimensional scene; converting a parent node of the target node to a three-dimensional configuration model through a CSS spatial transformation API, and editing the transformation attribute and the extended attribute of the parent node in the three-dimensional configuration model.

[0119] In some embodiments, the target two-dimensional icon is instantiated, and a dynamic attribute is edited in an instance of the target two-dimensional icon, including: instantiating the target two-dimensional icon in the virtual three-dimensional scene, and obtaining dynamic attribute information of the target two-dimensional icon; and adding the dynamic attribute information to the instance of the target two-dimensional icon.

[0120] In some embodiments, the target two-dimensional icon and the attribute of the target two-dimensional icon are sent to a three-dimensional scene previewer to display the target two-dimensional icon and the attribute information of the target two-dimensional icon, including: sending the instance of the target two-dimensional icon to the three-dimensional scene previewer, the instance of the target two-dimensional icon including the attribute of the target two-dimensional icon; rendering, by the three-dimensional scene previewer, the instance of the target two-dimensional icon to display the transformation attribute information; executing, by the three-dimensional scene previewer, the extended attribute logic to display the extended attribute information; sending, by the three-dimensional scene previewer, the dynamic attribute to a server; and receiving feedback information sent by the server to determine and display corresponding dynamic attribute information based on the feedback information.

[0121] In some embodiments, the dynamic attribute includes at least an execution condition, and the feedback information sent by the server includes at least prompt information meeting the execution condition.

[0122] In some embodiments, before displaying each dynamic attribute information, the three-dimensional scene previewer further includes: calling an underlying engine to determine whether there is a model entity between a virtual camera and the target two-dimensional icon by using ray detection; if yes, hiding the target two-dimensional icon; and if not, displaying the target two-dimensional icon.

[0123] In some embodiments, the transformation attribute includes at least position information, rotation information, and scaling information of the target two-dimensional icon; the extended attribute includes at least custom display information of the target two-dimensional icon; and the dynamic attribute includes at least interaction information.

[0124] It should be understood that the size of the serial number of each step in the above embodiments does not mean the order of execution, and the execution order of each process should be determined according to its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0125] Figure 11 is a schematic diagram of an electronic device provided by an embodiment of the present application. As shown in Figure 11As shown, the electronic device 11 of this embodiment includes a processor 1101, a memory 1102, and a computer program 1103 stored in the memory 1102 and executable on the processor 1101. The processor 1101 implements the steps in each of the above method embodiments when executing the computer program 1103. Alternatively, the processor 1101 implements the functions of each module / unit in each of the above apparatus embodiments when executing the computer program 1103.

[0126] The electronic device 11 can be a desktop computer, a notebook computer, a palm computer, a cloud server, or the like. The electronic device 11 can include but is not limited to the processor 1101 and the memory 1102. Those skilled in the art can understand that the electronic device 11 can include more or fewer components than those shown, or different components. Figure 11 The electronic device 11 is merely an example and does not constitute a limitation on the electronic device 11, which can include more or fewer components than those shown or different components.

[0127] The processor 1101 can be a central processing unit (CPU), or other general purpose processors, digital signal processors (DSP), application specific integrated circuits (ASIC), field programmable gate arrays (FPGA) or other programmable logic devices, discrete gates or transistor logic components, discrete hardware components, etc.

[0128] The memory 1102 can be an internal storage unit of the electronic device 11, such as a hard disk or a memory of the electronic device 11. The memory 1102 can also be an external storage device of the electronic device 11, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. The memory 1102 can also include both an internal storage unit and an external storage device of the electronic device 11. The memory 1102 is used to store computer programs and other programs and data required by the electronic device.

[0129] Those skilled in the art can clearly understand that, for the convenience and brevity of description, only the division of the above functional units and modules is taken as an example, and in actual application, the above functions can be completed by different functional units and modules according to needs, that is, the internal structure of the device is divided into different functional units or modules to complete all or part of the functions described above. Each functional unit and module in the embodiment can be integrated in one processing unit, or each unit can exist physically, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of software functional unit.

[0130] If the integrated module / unit is realized in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer readable storage medium. Based on this understanding, all or part of the processes in the above embodiment methods can also be completed by a computer program instructing related hardware, and the computer program can be stored in a computer readable storage medium. The computer program can be executed by a processor to implement the steps of each method embodiment. The computer program can include computer program code, which can be in the form of source code, object code, executable file or some intermediate form. The computer readable medium can include any entity or device capable of carrying computer program code, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc.

[0131] The above embodiments are only used to illustrate the technical solutions of the present application, but not to limit them; although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that they can modify the technical solutions recorded in the foregoing embodiments, or make equivalent replacement for part of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application, and should be included in the protection scope of the present application.

Claims

1. A method of displaying a two-dimensional icon in a three-dimensional scene, characterized by, The method comprises the following steps: adding a target two-dimensional icon in a three-dimensional configuration model, the target two-dimensional icon being associated with a target entity in the three-dimensional configuration model; constructing a virtual three-dimensional scene in the three-dimensional configuration model, the virtual three-dimensional scene having the same spatial transformation and perspective relationship as the three-dimensional configuration model; editing properties of the target two-dimensional icon in the virtual three-dimensional scene, the properties including at least one of transformation properties, extension properties and dynamic properties; sending the target two-dimensional icon and the properties of the target two-dimensional icon to a three-dimensional scene previewer to display the target two-dimensional icon and the property information thereof; wherein the three-dimensional scene previewer displays the transformation property information and the extension property information based on the transformation properties and the extension properties received from the virtual three-dimensional scene, and the three-dimensional scene previewer displays the dynamic property information based on the dynamic property matching result received from the server.

2. The method of claim 1, wherein, The method of constructing a virtual three-dimensional scene in the three-dimensional configuration model comprises: constructing a virtual three-dimensional scene on the three-dimensional configuration model by using a Cascading Style Sheets (CSS) spatial transformation Application Programming Interface (API); adding a virtual camera in the virtual three-dimensional scene so that the virtual three-dimensional scene has the same spatial transformation and perspective relationship as the three-dimensional configuration model.

3. The method of claim 1, wherein, The method of editing the properties of the target two-dimensional icon in the virtual three-dimensional scene comprises: editing the transformation properties and the extension properties in the virtual three-dimensional scene; instantiating the target two-dimensional icon and editing the dynamic properties in the instance of the target two-dimensional icon.

4. The method of claim 3, wherein, The method of editing the transformation properties and the extension properties in the virtual three-dimensional scene comprises: obtaining a Document Object Model (DOM) of the virtual three-dimensional scene; determining a target node corresponding to the target two-dimensional icon in the virtual three-dimensional scene DOM; converting a parent node of the target node to the three-dimensional configuration model by using the CSS spatial transformation API, and editing the transformation properties and the extension properties of the parent node in the three-dimensional configuration model.

5. The method of claim 3, wherein, The method of instantiating the target two-dimensional icon and editing the dynamic properties in the instance of the target two-dimensional icon comprises: instantiating the target two-dimensional icon in the virtual three-dimensional scene to obtain dynamic property information of the target two-dimensional icon; adding the dynamic property information to the instance of the target two-dimensional icon.

6. The method of claim 1, wherein, The method of sending the target two-dimensional icon and the properties of the target two-dimensional icon to the three-dimensional scene previewer to display the target two-dimensional icon and the property information thereof comprises: sending the instance of the target two-dimensional icon to the three-dimensional scene previewer, the instance of the target two-dimensional icon including the properties of the target two-dimensional icon; the three-dimensional scene previewer rendering the instance of the target two-dimensional icon to display the transformation property information; the three-dimensional scene previewer executing the extension property logic to display the extension property information; the three-dimensional scene previewer sending the dynamic properties to the server; receiving feedback information sent by the server to determine and display corresponding dynamic property information based on the feedback information.

7. The method of claim 6, wherein, The dynamic attribute at least includes an execution condition, and the feedback information sent by the server at least includes prompt information meeting the execution condition.

8. The method of claim 6, wherein, Before displaying the information of each dynamic attribute, the method further comprises: calling an underlying engine to determine whether there is a model entity between the virtual camera and the target two-dimensional icon by using ray detection; if yes, hiding the target two-dimensional icon; if no, displaying the target two-dimensional icon.

9. The method according to any one of claims 1 to 8, characterized in that, The transformation attribute at least includes position information, rotation information and scaling information of the target two-dimensional icon; The extended attribute at least includes custom display information of the target two-dimensional icon; The dynamic attribute at least includes interaction information.

10. A device for displaying two-dimensional symbols in a three-dimensional scene, characterized in that, The method comprises: adding a target two-dimensional icon in a three-dimensional configuration model, the target two-dimensional icon being associated with a target entity in the three-dimensional configuration model; constructing a virtual three-dimensional scene in the three-dimensional configuration model, the virtual three-dimensional scene having the same spatial transformation and perspective relationship as the three-dimensional configuration model; editing attributes of the target two-dimensional icon in the virtual three-dimensional scene, the attributes including at least one of a transformation attribute, an extended attribute and a dynamic attribute; sending the target two-dimensional icon and the attributes of the target two-dimensional icon to a three-dimensional scene previewer to display the target two-dimensional icon and the attribute information thereof; wherein the three-dimensional scene previewer displays transformation attribute information and extended attribute information based on the transformation attribute and the extended attribute received from the virtual three-dimensional scene, and displays dynamic attribute information based on a matching result of the dynamic attribute received from a server.

Images