A method for unity3d three-dimensional scene to interact with web page elements

Abstract

The application provides a method for unity3D three-dimensional scene and webpage element interactive communication, first using nodejs to realize websocket server, and then using unity3D developer to complete three-dimensional scene effect development according to product demand, encapsulating interactive actions to be completed by the three-dimensional scene into independent methods, realizing websocket communication mode supporting webgl platform in unity3D, creating websocket object, setting up message receiving, sending and closing connection events of websocket connection, and packing to generate webgl end for web developer, and then encapsulating independent methods for information interactive actions of charts and texts to be displayed in web interface according to product demand by web application developer. The method provided by the application can effectively solve the shortcomings of unity3D and web application element interactive communication, realize decoupling of double-end developers, reduce development communication and debugging difficulty, and effectively solve problems such as high communication cost and inconvenient development debugging in the development process.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of scene and page element interaction communication, and particularly relates to a unity3D three-dimensional scene and web page element interaction communication technology. BACKGROUND

[0002] Unity3d is a real-time content development platform widely used in the world. Unity platform provides a complete software solution, which can be used to create, operate and monetize any real-time interactive 2D and 3D content. The supported platforms include mobile phones, tablet computers, PCs, game consoles, augmented reality and virtual reality devices.

[0003] WebGL (Web Graphics Library) is a JavaScript API that can render high-performance interactive 3D and 2D graphics in any compatible web browser without using plug-ins.

[0004] With the development of 5G technology is more and more mature, 5G application is more and more widely, its influence on all walks of life is more and more obvious. In recent years, the construction of the field of smart city is constantly developing, and the concept of digital twin has been widely used in smart city, smart transportation, smart agriculture, smart medical treatment and other industries. With it, the demand for three-dimensional visualization is growing rapidly. Compared with the high development cost and inconvenience of deployment of the c / s architecture of the pure client application realized by unity3d, the web-based three-dimensional visualization application based on b / s architecture technology is attracting more and more attention from various industries. The basis of web application to realize three-dimensional visualization is webgl, and the mainstream webgl development scheme has certain inconvenience in the construction of three-dimensional scene, whether it is native development or based on mature rendering library (such as three.js). For example, the management of three-dimensional scene model and various rich dynamic effect effects based on shader are good at unity3d but not good at web application development. Three-dimensional visualization application not only contains complex three-dimensional scene, but also rich chart content, text information and video information and other display content, which are good at web application development. At present, the mainstream implementation scheme of web-based three-dimensional visualization application in the industry is to realize the construction and rendering of complex three-dimensional scene through unity3d. Through the cross-platform capability of unity3d, the complex three-dimensional scene is packaged into webgl and handed over to the web application developer. The web application developer embeds the unity3d packaged webgl page, and then completes the display of other elements in the visualization application except the three-dimensional scene according to the product requirements. This scheme will involve the interactive communication problem between unity3d three-dimensional scene and other elements of web application. At present, when unity3d constructs web content, in order to realize the function according to the webapi which is not disclosed by unity in the default state, it is necessary to directly connect with the javascript engine of the browser. First, define.jslib extension and place the javascript source code containing web application in the plugins subfolder of Assets folder, and the javascript source code needs to be written according to a certain syntax format. According to this way, the interaction between the two ends has great disadvantages, which needs the cooperation of unity developers and web application developers. This way has high coupling degree in the development process, which causes difficult debugging, high communication cost, and is not conducive to the development and deployment of the project. And maintenance and other problems. SUMMARY

[0005] In view of the inconvenience of the unity3d implemented webgl three-dimensional scene and other elements of web application interactive communication, the present application provides a unity3d three-dimensional scene and web page element interactive communication method, to solve the shortcomings of the existing unity3d and web application element interactive communication, realize the decoupling of the two end developers, reduce the development communication, debugging difficulty, solve the problems of high communication cost and inconvenient development debugging in the development process.

[0006] The scheme adopted by the present application to solve its technical problems is: a unity3d three-dimensional scene and web page element interactive communication method, comprising the following steps.

[0007] Step one, use nodejs to realize websocket server, including the following methods:

[0008] (1) import express.js framework in nodejs, create a file named app.js, define an http service application, build a web server used by socket.io;

[0009] (2) import socket.io library, create a file named socketServer.js, realize socket.io connection connection and disconnect disconnection event for recording user connection and leaving action;

[0010] (3) in the connection event connection defined in step (2), custom unityToweb event is used to handle the communication between unity3d end websocket and web application end websocket.

[0011] Step two, unity3d developers complete the development of three-dimensional scene effect according to product requirements, encapsulate the interactive action to be completed in three-dimensional scene into an independent method (for example, the camera view needs to be transformed in three-dimensional scene, encapsulate an independent method, the method name is cameraTransform(), running the method can complete the transformation of camera view).

[0012] Step three, implement webscokert communication mode supporting webgl platform in unity3d, create websocket object, connect the websocket server realized in step one, and set up the message receiving, sending and closing connection event of websocket connection.

[0013] Step four, after completing the unity3d end development through steps two and three, package and generate webgl end to hand over to web end developers.

[0014] Step five, web application end developers encapsulate independent methods according to product requirements in web interface for information interaction actions of charts and texts to be displayed (for example, a pop-up window needs to display specific text information and chart information when a button is clicked, and this function is encapsulated into an independent method, such as the method name showInfo(), which can display the information of the object by running the method).

[0015] Step six, web application end developers implement websocket communication method, create websocket object, and set websocket connection, message receiving and sending, and closing connection events for the object.

[0016] Step seven, web application end developers embed the webgl project generated by the unity3d end in step four into the web application end.

[0017] Step eight, create a unityToWeb.json file under the step one project directory (the first level directory of the code, that is, in the same directory as the App.js file), configure the json object in the file, and complete the mapping relationship of the respective interaction action methods of the unity3d end and the web application end encapsulated in steps two and five in the object.

[0018] Step nine, in the unityToweb event defined in step one (3) in the websocket server, listen to the messages of the unity end and the web interface end, read the unityToWeb.json file in step six, and complete the forwarding of the messages of the two ends.

[0019] Further, when the service end unityToweb event listens to the message of the unity3d end, the value corresponding to the attribute of the message object UnityMethodName is obtained, the corresponding webMethodName attribute value is calculated (the message object sent by the Socket communication contains the unityMethodName attribute), and the message is sent to the websocket of the web application end. The web application end triggers the same method defined in step six above to complete the triggering of the action and realizes the communication between the two ends. When the service end unityToweb listens to the message of the web application end, the value corresponding to the attribute of the message object webMethodName is obtained, the corresponding unityMethodName attribute value is calculated, and the message is sent to the websocket of the Unity3d end. The unity3d end triggers the method in step three above to complete the triggering of the action and realizes the communication between the two ends.

[0020] The application provides a method for interactive communication between a unity3d three-dimensional scene and a web page element. The method can effectively solve the shortcomings of the existing unity3d and web application element interactive communication, realize the decoupling of the developers of the two ends, reduce the development communication and debugging difficulty, and effectively solve the problems of high communication cost, inconvenient development and debugging in the development process.

[0021] The method of the application can conveniently realize complex three-dimensional scene construction and rendering effect based on unity3d through multiple steps. The unity3d end development only needs to complete the three-dimensional scene related development task according to product requirements. The web application end developer only needs to complete the development task of the web application end according to product requirements. For the unity3d end three-dimensional scene and web application end element linkage interactive communication problem, only the communication configuration file is defined in the manner of step eight, so that the decoupling of the developers of the two ends is realized, and the problems of high communication cost, inconvenient debugging and maintenance in the development process are reduced. BRIEF DESCRIPTION OF DRAWINGS

[0022] Figure 1 is the flowchart of the method of the application. EMBODIMENT

[0023] The application will be further described below in combination with the drawings and examples.

[0024] Example 1: Based on the websocket idea, the interactive communication between unity3d and web application is realized, and a method for interactive communication between a unity3d three-dimensional scene and a web page element is proposed, which includes the following steps.

[0025] Step one, using nodejs to achieve websocket server. The specific method of implementing websocket server is as follows.

[0026] In nodejs, introduce express.js framework. Create a file named app.js, define an http service application, and build a web server that socket.io will use.

[0027] Introduce socket.io library, create a file named socketServer.js, and implement socket.io connection and disconnect events to record user connection and leave actions.

[0028] In the connection event defined in step 2, customize the unityToweb event to handle the communication between the websocket of unity3d and the websocket of web application.

[0029] Step two, unity3d developers complete the development of three-dimensional scene effects according to product requirements. The interaction actions to be completed in the three-dimensional scene are packaged into independent methods in unity3d, such as three-dimensional scene switching action cameraSwitch(). This step does not need to communicate with web application developers about specific method naming.

[0030] Step three, implement websocket communication method supporting webgl platform in unity3d, create websocket object, connect the websocket server implemented in step one, and set up websocket connection message receiving, sending and closing connection events.

[0031] Further, when the message receiving event is triggered, get the UnityMethodName attribute from the message body messageData (code first directory, data object sent by double communication), for example, the value of unityMethodName is cameraSwitch, execute the cameraSwitch() method packaged in step two in unity3d, thus completing the interaction action of three-dimensional scene in unity3d.

[0032] Step four, after completing the development of unity3d in steps two and three, package and generate webgl end to web developers.

[0033] Step five, web application developers according to product requirements, in the web interface to show the chart, text and other information interaction action encapsulated independent method, for example, need to show the statistical list and corresponding chart information method showListAndcharts(), the step does not need to and unity3d developers communicate specific method naming.

[0034] Step six, web application developers to achieve websocket communication method, create websocket object, and set up the object websocket connection, message receiving and sending and closing connection event.

[0035] Further, when the message receiving event is triggered, from the message body messageData get WebMethodName attribute, for example, the value of WebMethodName is showListAndcharts, in the web execution step five in the showListAndcharts() method is encapsulated in advance, thus completing the web application end interaction action.

[0036] Step seven, web application developers will step four in the unity3d end generated webgl project embedded web application end.

[0037] Step eight, in step one engineering directory under the new unityToWeb.json file, in the file configuration json object, in the object complete step two and step five in the unity3d end and web application end encapsulated each interaction action method mapping relationship. For example, unity3d end to complete cameraSwitch() method (for encapsulating a specific function of a piece of code) at the same time to trigger the web interface end showListAndcharts() method. Configuration as follows (this example is the message object or message body messageData):

[0038] For example: {

[0039] {

[0040] "WebMethodName":"showListAndcharts",

[0041] "UnityMethodName":"cameraSwitch"

[0042] } ]

[0044] }.

[0045] Step nine, in the unityToweb event defined by the websocket server in step one (3) step, listen to the message of unity and web interface, read the unityToWeb.json file in step six, complete the message forwarding of both ends.

[0046] Further, when the service end unityToweb event listens to the message of unity3d end, the value corresponding to the message object UnityMethodName attribute is obtained, the corresponding webMethodName attribute value is calculated, and the message is sent to the websocket of the web application end. The web application end will trigger the same method defined in step six above to complete the action trigger and realize the communication of both ends.

[0047] Similarly, when the service end unityToweb listens to the message of the web application end, the value corresponding to the message object webMethodName attribute is obtained, the corresponding unityMethodName attribute value is calculated, and the message is sent to the Unity3d end websocket. The unity3d end will trigger the method in step three above to complete the action trigger and realize the communication of both ends.

[0048] Through the above steps, based on unity3d, complex three-dimensional scene building and rendering effect can be easily realized. Unity3d end development only needs to complete the three-dimensional scene related development task according to product requirements. Web application end developers only need to complete the development task of web application end according to product requirements. For the problem of unity3d end three-dimensional scene and web application end element linkage interaction communication, only the communication configuration file is defined according to step eight, so as to complete the decoupling of the developers of both ends, reduce the communication cost in the development process, and solve the problem of maintenance difficulty.

[0049] It should be understood that the above specific embodiments of the present application are only used for illustrative or explanatory purposes of the principles of the present application, and do not constitute a limitation of the present application. Therefore, any modification, equivalent replacement, improvement, etc. made without departing from the spirit and scope of the present application shall be included in the protection scope of the present application.

Claims

1. A method for unity3d three-dimensional scene and web page element interactive communication, characterized in that, The method comprises the following steps. Step one, using nodejs to realize websocket server, including the following methods: (1) import express.js framework in nodejs, create a file named app.js, define a http service application, to build the web server that socket.io will use; (2) import socket.io library, create a file named socketServer.js, realize socket.io's connection connection and disconnect disconnection event for recording user's connection and leaving action; (3) in the connection event connection defined in step (2), custom unityToweb event is used to handle the communication between websocket of unity3d end and websocket of web application end; Step two, unity3d developers complete the development of three-dimensional scene effect according to product requirements, and encapsulate the interactive actions to be completed in the three-dimensional scene into independent methods in unity3d; Step three, implement websocket communication mode supporting webgl platform in unity3d, create websocket object, connect the websocket server realized in step one, and set up the message receiving, sending and closing connection event of websocket connection; Step four, after completing the development of unity3d end through steps two and three, package the webgl end and hand it over to the web developer; Step five, web application developers encapsulate independent methods for information interactive actions of charts and texts to be displayed in the web interface according to product requirements; Step six, web application developers implement websocket communication mode, create websocket object, and set up websocket connection, message receiving and sending and closing connection event for the object; Step seven, web application developers embed the webgl project generated by unity3d end in step four into web application end; Step eight, create unityToWeb.json file under the project directory of step one, configure json object in the file, and complete the mapping relationship of the interactive action methods encapsulated in step two and step five in unity3d end and web application end in the object. Step nine, in the unityToweb event defined in step one (3) step, listen to the message of unity and web interface, read the unityToWeb.json file in step eight, complete the message forwarding of both ends; When the service side unityToweb event listens to the message of unity3d, get the value corresponding to the message object UnityMethodName attribute, calculate the corresponding webMethodName attribute value, and send the message to the web application side websocket, the web application side will trigger the same method defined in step five above, complete the action trigger, realize the communication of both ends; When the service side unityToweb listens to the message of web application, get the value corresponding to the message object webMethodName attribute, calculate the corresponding unityMethodName attribute value, and send the message to Unity3d side websocket, unity3d side will trigger the method in step three, complete the action trigger, realize the communication of both ends.

2. The method of interactive communication according to claim 1, wherein, The independent method encapsulated in step two includes three-dimensional scene switching action cameraSwitch().

3. The method of interactive communication according to claim 1, wherein, In step three, when the message receiving event is triggered, get the UnityMethodName attribute from the message body messageData, execute the cameraSwitch() method encapsulated in step two in unity3d, complete the interaction action of three-dimensional scene in unity3d.

4. The method for interactive communication according to claim 1, wherein, The independent method encapsulated in step five includes the method showListAndcharts() which needs to show the statistical list and the corresponding chart information.

5. The method for interactive communication according to claim 1, wherein, In step six, when the message receiving event is triggered, get the WebMethodName attribute from the message body messageData, execute the showListAndcharts() method encapsulated in step five in web, complete the interaction action of web application side.

6. The method for interactive communication according to claim 1, wherein, Step eight includes the cameraSwitch() method to be completed in unity3d, and the showListAndcharts() method to be triggered in web interface, which is configured as follows: "WebMethodName":"showListAndcharts"; "UnityMethodName":"cameraSwitch".

Images