3D large-screen rotation display method and device based on three.js

Abstract

The present application relates to the technical field related to data security, and specifically to a 3D large-screen rotating display method and device based on three.js. The method includes: obtaining the data to be displayed in real time; generating canvasTexture based on the data to be displayed and the preset display rules; applying canvasTexture to the material of the sub-Mesh object of the preset 3D model; wherein the preset 3D model is a pre-designed 3D model loaded using the three.js framework; the preset 3D model is used as an area for data display; controlling the 3D model to rotate around a preset axis to create a dynamic visual effect of a satellite orbiting a planet. In this way, updated data can be displayed in real time, which is very useful for application scenarios that need to monitor real-time information; the rotation animation of the 3D model improves the visual effect of data display, making information transmission more intuitive and interesting.

Description

Technical Field

[0001] The present application relates to the technical field related to data display, and specifically to a 3D large-screen rotation display method and device based on three.js. Background Art

[0002] At present, with the continuous development of the digital economy, all walks of life have joined the digital transformation team. To achieve digital transformation, digital management systems, intelligent terminals, real-time data display monitoring centers, etc. are indispensable. Visual digital screens play a very important role in this: Visual digital screens are a common business expression form for current data display, business monitoring, command and dispatch, and often use visual charts, effect decoration, event operation and other technologies to form cool effect displays. However, most of the existing data displays are two-dimensional displays, and the display effect is not good. Summary of the invention

[0003] In view of this, the embodiments of the present application are dedicated to providing a 3D large-screen rotation display method and device based on three.js.

[0004] This application provides a 3D large-screen rotation display method based on three.js, including:

[0005] Obtain the data to be displayed in real time;

[0006] Generate canvasTexture based on the data to be displayed and preset display rules;

[0007] Apply canvasTexture to the material of the sub-Mesh object of the preset 3D model; wherein the preset 3D model is a pre-designed 3D model loaded using the three.js framework; the preset 3D model is used as an area for data display;

[0008] Control the 3D model to rotate around a preset axis to create the dynamic visual effect of a satellite orbiting a planet.

[0009] In some embodiments, it also includes:

[0010] Set the DOM mount point of the 3D model; set the three.js scene, camera and renderer, and mount the HTML element used for rendering in the renderer to the DOM mount point;

[0011] In some embodiments, the renderer is a WebGLRenderer.

[0012] In some embodiments, it also includes:

[0013] Use MTLLoader to load the material file corresponding to the preset 3D model;

[0014] Use OBJLoader to load the model file corresponding to the preset 3D model;

[0015] Based on the material file and the model file, the preset 3D model is displayed.

[0016] In some embodiments, applying canvasTexture to the material of the sub-Mesh object of the preset 3D model includes:

[0017] Traverse each child Mesh object and render the canvasTexture corresponding to the child Mesh object on both sides.

[0018] In some embodiments, controlling the 3D model to rotate around a preset axis includes:

[0019] Call the web browser's built-in window.requestAnimationFrame to loop through the coordinates of the 3D model's rotation property to make it rotate around the preset axis.

[0020] In some embodiments, it also includes:

[0021] Based on a preset listener, monitor whether the data to be displayed changes;

[0022] If the data to be displayed changes, reacquire the changed data to be displayed;

[0023] Regenerate canvasTexture based on the changed data to be displayed.

[0024] The present application also provides a 3D large-screen rotating display device based on three.js, including:

[0025] The acquisition module is used to obtain the data to be displayed in real time;

[0026] A generation module, used for generating canvasTexture based on the data to be displayed and preset display rules;

[0027] An application module, used to apply canvasTexture to the material of a sub-Mesh object of a preset 3D model; wherein the preset 3D model is a pre-designed 3D model loaded using the three.js framework; the preset 3D model is used as an area for data display;

[0028] The rotation module is used to control the 3D model to rotate around a preset axis to create a dynamic visual effect of a satellite orbiting a planet.

[0029] The present application also provides an electronic device, including:

[0030] A processor, and a memory for storing a program executable by the processor;

[0031] The processor is used to implement the above-mentioned 3D large-screen rotation display method based on three.js by running the program in the memory.

[0032] The present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the processor executes the above-mentioned 3D large-screen rotation display method based on three.js.

[0033] The present application provides a 3D large-screen rotation display method based on three.js, which first obtains the data to be displayed in real time; generates canvasTexture based on the data to be displayed and the preset display rules; applies canvasTexture to the material of the sub-Mesh object of the preset 3D model; wherein the preset 3D model is a pre-designed 3D model loaded using the three.js framework; the preset 3D model is used as the area for data display; the 3D model is controlled to rotate around the preset axis to create a dynamic visual effect of a satellite orbiting a planet. This setting can display updated data in real time, which is very useful for application scenarios that need to monitor real-time information; the rotation animation of the 3D model improves the visual effect of data display, making information transmission more intuitive and interesting. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] By describing the embodiments of the present application in more detail in conjunction with the accompanying drawings, the above and other purposes, features and advantages of the present application will become more apparent. The accompanying drawings are used to provide a further understanding of the embodiments of the present application and constitute a part of the specification. Together with the embodiments of the present application, they are used to explain the present application and do not constitute a limitation of the present application. In the accompanying drawings, the same reference numerals generally represent the same components or steps.

[0035] Figure 1 The present invention is a display effect diagram provided by an embodiment.

[0036] Figure 2 This is a display effect diagram provided by another embodiment.

[0037] Figure 3 It is a flowchart of a 3D large-screen rotation display method based on three.js provided in an embodiment of the present application.

[0038] Figure 4 This is a display effect diagram provided by an embodiment of the present application.

[0039] Figure 5 This is a display effect diagram provided by another embodiment of the present application.

[0040] Figure 6 This is a display effect diagram provided by another embodiment of the present application.

[0041] Figure 7 It is a flowchart of a 3D large-screen rotation display method based on three.js provided in another embodiment of the present application.

[0042] Figure 8 This is a partial flow chart of a 3D large-screen rotation display method based on three.js provided in one embodiment of the present application.

[0043] Fig. 9 This is a partial flow chart of a 3D large-screen rotation display method based on three.js provided in another embodiment of the present application.

[0044] Fig.10 It is a structural schematic diagram of a 3D large-screen rotating display device based on three.js provided in one embodiment of the present application.

[0045] Fig.11 It is a schematic diagram of the structure of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0046] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0047] Application Overview

[0048] First, some terms involved in this application are explained:

[0049] Three.js framework: A 3D engine that runs on native WebGL wrapper.

[0050] WebGL: WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics in web browsers. It is based on the OpenGL ES (OpenGL for Embedded Systems) standard and allows developers to use the browser's graphics processing capabilities to create complex graphics, visual effects, and interactive experiences.

[0051] CSS: CSS (Cascading Style Sheets) is a markup language used to describe the presentation and style of documents (such as HTML documents). It can control the appearance, layout and style of elements in a web page, making web design more flexible and beautiful.

[0052] JavaScript: JavaScript (often abbreviated as JS) is a multi-paradigm high-level interpreted programming language based on prototypes and first-class functions. It supports object-oriented programming, imperative programming, and functional programming.

[0053] Div node: In HTML, div is a general container element used to organize and wrap content. It is a block-level element that is usually used to divide and organize different blocks or parts of a web page, and can be styled and layout controlled by CSS.

[0054] setInterval function: setInterval is a function in JavaScript that is used to periodically execute a specified code block or function. It can repeatedly execute a task at a certain time interval until it is canceled or the page is closed.

[0055] DOM: DOM (Document Object Model) is a way to represent and process documents such as HTML and XML. It parses the document into a structure composed of nodes and objects, allowing developers to access and modify the content, structure and style of the document through programming languages ​​​​(such as JavaScript).

[0056] window.requestAnimationFrame: window.requestAnimationFrame is a browser API for performing animations. It allows developers to execute a specified function before the next redraw of the browser, and is usually used to achieve smooth animation effects.

[0057] MTLLoader: MTLLoader is one of the loaders used in Three.js to load model files based on the Wavefront.obj file format. MTLLoader is responsible for loading the .mtl material file associated with the .obj file. In the Wavefront.obj format, the material information of the model is usually saved in a separate .mtl file. MTLLoader can parse and load these material files and apply them to the corresponding models to ensure that the model displays its materials and textures correctly in Three.js.

[0058] OBJLoader: OBJLoader is a loader in Three.js, used to load and parse 3D model files in Wavefront.obj file format. With OBJLoader, model files saved in .obj format can be loaded into Three.js scenes.

[0059] CanvasTexture: CanvasTexture is a texture type in Three.js that allows developers to use HTML5 <canvas>The content of the element is used as a texture to render objects in Three.js. This type of texture is very flexible because developers can dynamically <canvas>Draw graphics, text, images, etc. on it and apply them as textures to objects in Three.js.

[0060] Mesh object: In Three.js, Mesh is one of the basic elements for representing three-dimensional objects. It is an entity composed of geometry and material, and is used to render and display objects in Three.js scenes.

[0061] With the continuous development of the digital economy, all walks of life have joined the digital transformation team. To achieve digital transformation, digital management systems, smart terminals, real-time data display monitoring centers, etc. are indispensable. Visual digital screens play a very important role in this: Visual digital screens are a common business expression form for current data display, business monitoring, command and dispatch, and often have visual charts, effect decorations, event operations and other technologies to form cool effect displays.

[0062] At present, visualization digital large screens are widely used in business, education, finance, industrial Internet and other fields. The visualization large screens realized by existing technologies are generally located in the center of the large screens, and generally display some core indicator data. These indicator data are often updated and changed in real time. In order to be beautiful and highlight the dynamic nature of the large screen, many users also require that the indicator data in the middle can not only change in real time, but also rotate and change continuously (the effect is similar to multiple satellites orbiting a planet), such as Figure 1 , Figure 2 The following is the mainstream large-screen indicator data rotation effect based on 2D css, javascript and other technologies in the prior art. Although this implementation technology can achieve the corresponding effect, there are some problems. First, at the display level, the indicator body of this rotation effect is still some 2D div nodes. In the process of rotation (or revolution), the implementation effect is not as beautiful as 3D graphics. Secondly, at the technical level, when realizing the indicator data rotation effect, if the rotation of the indicator node is mainly based on css, since css itself is not a Turing-complete programming language, and the rotation of the div node requires a lot of logical judgment and curve calculation, it is difficult to achieve. If the rotation of the indicator node is mainly based on javascript, although the rotation of the div node can be realized, it is necessary to use timer functions such as setInerval (or window.requestAnimationFrame) and trigonometric functions (sine, cosine functions, etc.) calculations, which is more complicated to implement, and in the implementation of specific animation effects, the performance is not as good as css (because the browser can optimize css and use hardware acceleration to process animation effects). In order to improve the shortcomings of the existing technology, the present invention provides a method for realizing the display effect of 3D large-screen rotation index data based on three.js. A 3D model is loaded to render an overall three-dimensional index data display area, and the data and pictures that need to be changed are converted into canvasTexture and added to the material of the sub-Mesh object of the 3D model to realize the effect of displaying real-time updated data on the 3D model; finally, the rotation (autorotation) effect of the 3D model is realized by increasing the y-axis coordinate of the rotation attribute of the 3D model.

[0063] After introducing the basic principles of the present application, various non-limiting embodiments of the present application will be described in detail with reference to the accompanying drawings.

[0064] Exemplary Methods

[0065] Figure 3 This is a flow chart of a 3D large screen rotation display method based on three.js provided by an embodiment of the present application. Figure 3 As shown, the method includes the following contents.

[0066] Step S310, obtaining the data to be displayed in real time;

[0067] Specifically, in the solution provided by the present application, the data to be displayed can be obtained from a data source. The solution provided by the present application may involve reading from a database, obtaining through a network request, or extracting information from other real-time data streams.

[0068] Step S320, generating canvasTexture based on the data to be displayed and preset display rules;

[0069] Specific implementation methods may include: using JavaScript to create an HTML5 <canvas>Elements. Through the 2D context (2d) in <canvas>Draw the data to be displayed on it, which may include text, charts, icons, etc. <canvas>The contents of the canvas are converted to a canvasTexture by calling the .toDataURL() method of the canvas element and passing the returned data URL to the THREE.CanvasTexture constructor.

[0070] Step S330, applying canvasTexture to the material of the sub-Mesh object of the preset 3D model; wherein the preset 3D model is a pre-designed 3D model loaded using the three.js framework; the preset 3D model is used as an area for data display;

[0071] Specifically, the pre-designed 3D model can be a file in a format such as .obj or .gltf. Use a Three.js loader (such as OBJLoader) to load the model and material. Traverse the sub-objects of the 3D model to find the Mesh objects that need to apply textures. Set the newly generated canvasTexture for the material (Material) of these Mesh objects.

[0072] Step S340, controlling the 3D model to rotate around a preset axis to create a dynamic visual effect of a satellite orbiting a planet.

[0073] Specifically, in the animation loop, the y-axis component of the rotation property of the 3D model is incremented to simulate the rotation effect. Use requestAnimationFrame to create a continuous animation loop so that the rotation state of the 3D model is updated in each frame. In the solution provided in this application, a 3D model is loaded to render an overall three-dimensional indicator data display area, and the data and pictures that need to be changed are converted into canvasTexture and added to the material of the sub-Mesh object of the 3D model to achieve the effect of displaying real-time updated data on the 3D model; finally, the y-axis coordinate of the rotation property of the 3D model is incremented to achieve the rotation (rotation) effect of the 3D model. The above scheme can be used to achieve the following: Figure 4 , Figure 5 and Figure 6 The effect of display.

[0074] In some embodiments, the 3D large-screen rotation display method based on three.js further includes: setting a DOM mount point of the 3D model; setting a three.js scene, camera and renderer, and mounting an HTML element used for rendering in the renderer to the DOM mount point. The renderer is a WebGLRenderer.

[0075] It should be noted that the DOM mount point of the 3D model is set; the scene, camera and renderer of three.js are set, and the specific content can be set to adjust the actual effect of the display, so as to obtain a more expected effect. The renderer can be WebGLRenderer; WebGLRenderer can use WebGL technology to achieve hardware accelerated 3D rendering, and can perform high-performance rendering in modern browsers that support WebGL.

[0076] In actual applications, initialization is required first. For details, refer to Figure 7 , you need to initialize the DOM mount point of the 3d model. This DOM mount point is generally an empty div element node. Generally, you need to specify the width and height of this node (the width and height determine the width and height of the rendered 3d model). Initialize the three.js scene, camera, renderer, etc., and mount the HTML element used for rendering in the renderer to the DOM mount point. In this step, you need to pay attention to the choice of the initialized camera. Three.js provides many types of cameras, such as PerspectiveCamera and OrthographicCamera. If a perspective camera is used, it will simulate the way the human eye observes the scene. In the actual rendered model effect, objects in the distance will appear smaller, while objects in the near distance will appear larger. If an orthographic camera is used, a parallel projection will be presented, and objects near and far will appear to be the same size, without a perspective effect. In this case, an orthographic camera is used. When using an orthographic camera, you need to set some initialization parameters, including the left, right, top, and bottom attributes, which determine the boundaries of the parallel projection of the viewing cone. Near and far (near clipping plane and far clipping plane) determine the closest and farthest distances that the camera can see. In terms of renderer selection, this case chooses WebGLRenderer, which is the most commonly used renderer type. It uses WebGL technology to achieve hardware-accelerated 3D rendering and can perform high-performance rendering in modern browsers that support WebGL. In addition, when initializing the renderer, you also need to pay attention to configuring the antialias and alpha properties to true. Among them, antialias configured to true will enable anti-aliasing. Three.js will try to reduce the jagged edges of the graphics during the rendering process to make the rendered image smoother. Alpha means enabling transparency. When set to true, the created renderer will support background transparency, so that the Three.js scene can be superimposed on other HTML elements or backgrounds. Next, mount the HTML element used for rendering in the renderer to the DOM mount point. This step can link the DOM mount point with the threejs renderer. After that, you need to initialize the light source. In this case, the light source selected is ambient light (THREE.AmbientLight), and the light source color is configured as white. In addition, the intensity of the light source can be configured according to the different display effects of the project. The light source will then be added to the scene (if no light source is added, the rendered 3D model is likely to be dark or invisible).

[0077] Specifically, in some embodiments, the solution provided by the present application also includes: using MTLLoader to load the material file corresponding to the preset 3D model; using OBJLoader to load the model file corresponding to the preset 3D model; based on the material file and the model file, displaying the preset 3D model. In this way, MTLLoader allows complex material definitions to be loaded, including different textures and colors. OBJLoader supports loading 3D models in OBJ file format, which is widely used in 3D modeling and animation. The solution provided by the present application can further process the loaded model, such as adding animation, changing position or applying different materials. Through the above steps, a 3D model with materials can be displayed on a web page, bringing a rich visual experience to users.

[0078] In actual applications, it is necessary to prepare in advance a 3D model file that meets business requirements and its corresponding material file, which are generally designed by a modeler.

[0079] In this case, a 3D model file in .obj format is loaded, which also comes with a corresponding default material file (the material can be modified and enriched based on the default material file later).

[0080] In the specific implementation steps, first use MTLLoader to load the default material file, and then get the material object after loading. Then use OBJLoader to load the model file, and then get the model object after loading. Then set the material object to the model object. It should be noted that it takes a certain amount of time to load both the model file and the material file. If deployed on the server, the model file may not be successfully loaded due to network or other special reasons.

[0081] If the model file and material file are not loaded successfully, the user will be prompted with "model file not obtained", and the entire indicator display area will not be rendered successfully. If the model file and material file are loaded successfully, the default material object will be set to the model object. Then, the large-screen indicator data and pictures to be displayed need to be added to the model.

[0082] In some embodiments, applying canvasTexture to the material of the sub-Mesh object of the preset 3D model includes:

[0083] Traverse each child Mesh object and render the canvasTexture corresponding to the child Mesh object on both sides.

[0084] Specifically, first traverse the model object to obtain several sub-Mesh objects. Traverse each sub-Mesh object to generate the corresponding canvasTexture object, which contains the large-screen indicator data, icons, etc. to be displayed, and render the canvasTexture on both sides to the sub-Mesh object. The specific program flow chart is as follows Figure 8 As shown. First, get a child Mesh object of a model object, create a canvas 2d canvas object and enable anti-aliasing. Enabling anti-aliasing is to minimize the jagged edges of the content generated by the canvasTexture rendering. Create an Image object to load the background image of the specified path. After the image is loaded (here it is also necessary to determine whether the background image can be loaded normally. If it cannot be loaded normally, the user needs to be prompted), draw the background image to the canvas context object; then draw icons, text (including large-screen indicator data that need to be displayed, etc.) and other content to the canvas context object. Then create a three.js texture object, namely the canvasTexture object, and then set the color space of the canvasTexture object to sRGB (the default is THREE.LinearEncoding. If the color space is not modified, there will be a deviation between the color of the final rendered image and the color of the original material). Then load the canvasTexture into the material of the Mesh object and configure double-sided rendering. If double-sided rendering is not configured here, the final rendered content will only exist on one side of the 3d model, and there will be no content on the other side. Finally, adjust the size of the Mesh object to meet business requirements. After completing this step, if you do not need to add model rotation logic, you can directly load the scene and camera into the three.js renderer. The final effect is as follows: Figure 4 As shown: The indicator data and icons of the large screen are loaded into a 3D threejs model (the model part is Figure 4 The circled area in the figure does not include the green score area). This setting allows you to add the large screen indicator data and pictures that need to be displayed to the model.

[0085] Furthermore, controlling the 3D model to rotate around a preset axis includes:

[0086] Call the web browser's built-in window.requestAnimationFrame to loop through the coordinates of the 3D model's rotation property to make it rotate around the preset axis.

[0087] Specifically, if you need to rotate the model, you need to cyclically increase the y-axis coordinate of the rotation property of the three.js model object so that it continuously rotates around the y-axis of the right-handed coordinate system of the space. In this step, you need to call the window.requestAnimationFrame method of the web browser to cyclically increase the y-axis coordinate of the rotation property of the three.js model object. The javascript pseudo code for this step is as follows:

[0088]

[0089] Furthermore, the solution provided by the present application also includes: based on a preset listener, monitoring whether the data to be displayed changes; if the data to be displayed changes, reacquiring the changed data to be displayed; and regenerating canvasTexture based on the changed data to be displayed.

[0090] Reference Fig. 9 Specifically, it includes: first, you need to create a large screen indicator data content change listener, which is implemented by monitoring the indicator content object (in JavaScript, it is generally implemented through a proxy or Object.defineProperty function). When the listener detects that the indicator content has changed, it will notify the canvasTexture generation function and pass the new indicator content to the canvasTexture generation function. The canvasTexture function will generate a new canvasTexture based on the new indicator content data and embed it into each sub-Mesh object of the 3D model. Doing so will overwrite the original canvasTexture on the Mesh object, and finally achieve real-time update of the content displayed on the 3D model.

[0091] To sum up, in the solution provided by this application, the 3D model is loaded through three.js, and the data content to be displayed is pasted onto the 3D model through canvasTexture to achieve a 3D visualization large-screen display effect. Compared with the 2D large-screen effect achieved by traditional javascript+css development, it is more beautiful, simple, and has better performance.

[0092] Exemplary Devices

[0093] The device embodiments of the present application can be used to execute the method embodiments of the present application. For details not disclosed in the device embodiments of the present application, please refer to the method embodiments of the present application.

[0094] Fig.10 The block diagram of a 3D large screen rotating display device based on three.js provided by an embodiment of the present application is shown. Fig.10 As shown, the device comprises:

[0095] The acquisition module 101 is used to acquire the data to be displayed in real time;

[0096] A generating module 102, configured to generate a canvasTexture based on the data to be displayed and a preset display rule;

[0097] The application module 103 is used to apply the canvasTexture to the material of the sub-Mesh object of the preset 3D model; wherein the preset 3D model is a pre-designed 3D model loaded using the three.js framework; the preset 3D model is used as an area for data display;

[0098] The rotation module 104 is used to control the 3D model to rotate around a preset axis to create a dynamic visual effect of a satellite orbiting a planet.

[0099] In some embodiments, it is also used to:

[0100] Set the DOM mount point of the 3D model; set the three.js scene, camera and renderer, and mount the HTML element used for rendering in the renderer to the DOM mount point;

[0101] In some embodiments, the renderer is a WebGLRenderer.

[0102] In some embodiments, it is also used to:

[0103] Use MTLLoader to load the material file corresponding to the preset 3D model;

[0104] Use OBJLoader to load the model file corresponding to the preset 3D model;

[0105] Based on the material file and the model file, the preset 3D model is displayed.

[0106] In some embodiments, the step of applying canvasTexture to the material of the sub-Mesh object of the preset 3D model includes:

[0107] Traverse each child Mesh object and render the canvasTexture corresponding to the child Mesh object on both sides.

[0108] In some embodiments, the method is further used to control the 3D model to rotate around a preset axis, including:

[0109] Call the web browser's built-in window.requestAnimationFrame to loop through the coordinates of the 3D model's rotation property to make it rotate around the preset axis.

[0110] In some embodiments, it is also used to:

[0111] Based on a preset listener, monitor whether the data to be displayed changes;

[0112] If the data to be displayed changes, reacquire the changed data to be displayed;

[0113] Regenerate canvasTexture based on the changed data to be displayed.

[0114] Exemplary Electronic Devices

[0115] Below, reference Fig.11 To describe an electronic device according to an embodiment of the present application. Fig.11 A block diagram of an electronic device according to an embodiment of the present application is illustrated.

[0116] like Fig.11 As shown, electronic device 1100 includes one or more processors 1110 and memory 1120 .

[0117] The processor 1110 may be a central processing unit (CPU) or other forms of processing units having data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device 1100 to perform desired functions.

[0118] The memory 1120 may include one or more computer program products, and the computer program product may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory (cache), etc. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium, and the processor 1110 may run the program instructions to implement the 3D large-screen rotation display method based on three.js of the various embodiments of the present application described above and / or other desired functions. Various contents such as category correspondences may also be stored in the computer-readable storage medium.

[0119] In one example, the electronic device 1100 may further include: an input device 1130 and an output device 1140 , and these components are interconnected via a bus system and / or other forms of connection mechanisms (not shown).

[0120] In addition, the input device 1130 may also include, for example, a keyboard, a mouse, an interface, etc. The output device 1140 may output various information to the outside, including analysis results, etc. The output device 1140 may include, for example, a display, a speaker, a printer, a communication network and a remote output device connected thereto, etc.

[0121] Of course, to simplify, Fig.11 Only some of the components in the electronic device related to the present application are shown, and components such as a bus, an input / output interface, etc. are omitted. In addition, the electronic device may further include any other appropriate components according to specific application conditions.

[0122] Exemplary computer program products and computer-readable storage media

[0123] In addition to the above-mentioned methods and devices, an embodiment of the present application may also be a computer program product, which includes computer program instructions, which, when executed by a processor, enable the processor to execute the steps of the 3D large-screen rotation display method based on three.js according to various embodiments of the present application described in the above "Exemplary Method" section of this specification.

[0124] The computer program product may be written in any combination of one or more programming languages ​​to write program codes for performing the operations of the embodiments of the present application, including object-oriented programming languages, such as Java, C++, etc., and conventional procedural programming languages, such as "C" language or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user computing device, as an independent software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0125] In addition, an embodiment of the present application may also be a computer-readable storage medium on which computer program instructions are stored. When the computer program instructions are executed by a processor, the processor executes the steps of the 3D large-screen rotation display method based on three.js according to various embodiments of the present application described in the above "Exemplary Method" section of this specification.

[0126] The computer readable storage medium can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can include, for example, but is not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0127] The above description has been given for the purpose of illustration and description. In addition, this description is not intended to limit the embodiments of the present application to the forms disclosed herein. Although multiple example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, changes, additions and sub-combinations thereof.< / canvas> < / canvas> < / canvas> < / canvas> < / canvas>

Claims

1. A 3D large-screen rotation display method based on three.js, characterized in that: include: Obtain the data to be displayed in real time; Generate canvasTexture based on the data to be displayed and the preset display rules, including: Creating HTML5 with JavaScript <canvas>Elements, through the 2D context in <canvas>Draw the data to be displayed on the canvas element by calling the .toDataURL() method and passing the returned data URL to the THREE.CanvasTexture constructor. <canvas> Convert the content to canvasTexture;< / canvas> < / canvas> < / canvas> Apply canvasTexture to the material of the sub-Mesh object of the preset 3D model; wherein the preset 3D model is a pre-designed 3D model loaded using the three.js framework; the preset 3D model is used as an area for data display; Control the 3D model to rotate around a preset axis to create a dynamic visual effect of a satellite orbiting a planet, including: Use requestAnimationFrame to create a continuous animation loop so that the rotation state of the 3D model is updated in each frame. The 3D model is loaded to render an overall three-dimensional indicator data display area. The data to be displayed that needs to be changed is converted into canvasTexture and added to the material of the sub-Mesh object of the 3D model to achieve the effect of displaying real-time updated data on the 3D model; the rotation effect of the 3D model is achieved by incrementing the y-axis coordinate of the rotation attribute of the 3D model.

2. The 3D large-screen rotation display method based on three.js according to claim 1 is characterized in that: Also includes: Set the DOM mount point of the 3D model; set the three.js scene, camera and renderer, and mount the HTML element used for rendering in the renderer to the DOM mount point.

3. The 3D large-screen rotation display method based on three.js according to claim 1 is characterized in that: The renderer is WebGLRenderer.

4. The 3D large-screen rotation display method based on three.js according to claim 1 is characterized in that: Also includes: Use MTLLoader to load the material file corresponding to the preset 3D model; Use OBJLoader to load the model file corresponding to the preset 3D model; Based on the material file and the model file, the preset 3D model is displayed.

5. The 3D large-screen rotation display method based on three.js according to claim 1 is characterized in that: The step of applying canvasTexture to the material of the sub-Mesh object of the preset 3D model includes: Traverse each child Mesh object and render the canvasTexture corresponding to the child Mesh object on both sides.

6. The 3D large-screen rotation display method based on three.js according to claim 1 is characterized in that: The controlling the 3D model to rotate around a preset axis includes: Call the web browser's built-in window.requestAnimationFrame to loop through the coordinates of the 3D model's rotation property to make it rotate around the preset axis.

7. The 3D large-screen rotation display method based on three.js according to claim 1 is characterized in that: Also includes: Based on a preset listener, monitor whether the data to be displayed changes; If the data to be displayed changes, reacquire the changed data to be displayed; Regenerate canvasTexture based on the changed data to be displayed.

8. A 3D large-screen rotating display device based on three.js, characterized in that: include: The acquisition module is used to obtain the data to be displayed in real time; A generation module, used to generate canvasTexture based on the data to be displayed and preset display rules, including: Creating HTML5 with JavaScript <canvas>Elements, through the 2D context in <canvas>Draw the data to be displayed on the canvas element by calling the .toDataURL() method and passing the returned data URL to the THREE.CanvasTexture constructor. <canvas> Convert the content to canvasTexture;< / canvas> < / canvas> < / canvas> An application module, used to apply canvasTexture to the material of a sub-Mesh object of a preset 3D model; wherein the preset 3D model is a pre-designed 3D model loaded using the three.js framework; the preset 3D model is used as an area for data display; The rotation module is used to control the 3D model to rotate around a preset axis to create a dynamic visual effect of a satellite orbiting a planet, including: Use requestAnimationFrame to create a continuous animation loop so that the rotation state of the 3D model is updated in each frame. The 3D model is loaded to render an overall three-dimensional indicator data display area. The data to be displayed that needs to be changed is converted into canvasTexture and added to the material of the sub-Mesh object of the 3D model to achieve the effect of displaying real-time updated data on the 3D model; the rotation effect of the 3D model is achieved by incrementing the y-axis coordinate of the rotation attribute of the 3D model.

9. An electronic device, characterized in that: include: A processor, and a memory for storing a program executable by the processor; The processor is used to implement the 3D large-screen rotation display method based on three.js as described in any one of claims 1 to 7 by running the program in the memory.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by the processor, the processor executes the 3D large-screen rotation display method based on three.js as described in any one of claims 1 to 7.

Images