CN118394312B

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

Info

Publication number: CN118394312B
Application number: CN202410582528.8A
Authority: CN
Inventors: 程大康; 王志鹏; 李天洋; 季忠祥; 潘宇饶
Original assignee: Jiangxi Digital Internet Connection Information Security Technology Co ltd
Current assignee: Jiangxi Digital Internet Connection Information Security Technology Co ltd
Priority date: 2024-05-11
Filing date: 2024-05-11
Publication date: 2025-04-04
Anticipated expiration: 2044-05-11
Also published as: CN118394312A

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

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

Technical Field

The application relates to the technical field of data display, in particular to a 3d large screen rotation display method and device based on three.

Background

Currently, with the continuous development of digital economy, various industries are continually added to digital transformation teams. The digital management system, the intelligent terminal, the data real-time display monitoring center and the like can be realized without the need of digital transformation. The visual digital large screen plays a very important role in the process, wherein the visual digital large screen is a common service expression form of current data display, service monitoring, command scheduling and the like, and has a cool and dazzling effect display of technical compositions such as visual charts, effect decoration, event operation and the like. However, most of the existing data display is two-dimensional display, and the display effect is poor.

Disclosure of Invention

In view of this, embodiments of the present application are directed to providing a method and apparatus for 3d large screen rotation display based on three.

The application provides a 3d large screen rotation display method based on three.js, which comprises the following steps:

Acquiring data to be displayed in real time;

Generating canvasTexture based on the data to be displayed and preset display rules;

Applying canvasTexture to the material of a child Mesh object of a preset 3D model, wherein the preset 3D model is a pre-designed 3D model loaded by using a thread. Js frame, and the preset 3D model is used as a data display area;

and controlling the 3D model to rotate around a preset axis so as to create a dynamic visual effect of satellite orbiting revolution.

In some embodiments, further comprising:

Setting a scene, a camera and a renderer of thread. Js, and mounting HTML elements for rendering in the renderer to the DOM mounting points;

In some embodiments, the renderer is WebGLRenderer.

In some embodiments, further comprising:

Using MTLLoader to load a material file corresponding to a preset 3D model;

using OBJLoader to load a model file corresponding to a preset 3D model;

And displaying the preset 3D model based on the material file and the model file.

In some embodiments, the applying canvasTexture to the material of the child Mesh object of the preset 3D model includes:

Traversing each child Mesh object, and rendering canvasTexture double-sided corresponding to the child Mesh object onto the child Mesh object.

In some embodiments, the controlling the 3D model to spin about a preset axis comprises:

invoking a window of the web browser, requesting an animation frame, and circularly presetting coordinates of a rotation attribute of the 3D model to enable the coordinates to rotate around a preset axis continuously.

In some embodiments, further comprising:

based on a preset monitor, monitoring whether the data to be displayed changes or not;

if the data to be displayed changes, the changed data to be displayed is acquired again;

and regenerating canvasTexture based on the changed data to be displayed.

The application also provides a 3d large screen rotation display device based on three.js, which comprises:

The acquisition module is used for acquiring data to be displayed in real time;

The generation module is used for generating canvasTexture based on the data to be displayed and preset display rules;

The application module is used for applying canvasTexture to the material of the child Mesh object of the preset 3D model, wherein the preset 3D model is a pre-designed 3D model loaded by using a thread. Js frame, and the preset 3D model is used as a data display area;

and the rotation module is used for controlling the 3D model to rotate around a preset axis so as to create a dynamic visual effect of satellite orbital revolution.

The present application also provides an electronic device including:

a processor and a memory for storing a program executable by the processor;

And the processor is used for realizing the 3d large screen rotation display method based on the thread.

The present application also provides a computer readable storage medium having stored thereon a computer program which, when executed by a processor, causes the processor to perform a three-dimensional (3 d) large screen rotation presentation method as described above based on three.

The 3D large screen rotation display method based on the three.js comprises the steps of firstly obtaining data to be displayed in real time, generating canvasTexture based on the data to be displayed and preset display rules, and applying canvasTexture to materials of child Mesh objects of a preset 3D model, wherein the preset 3D model is a pre-designed 3D model loaded by using the three.js frame, the preset 3D model is used as a data display area, and the 3D model is controlled to rotate around a preset axis to create a dynamic visual effect of satellite orbital revolution. The method can display the updated data in real time, is very useful for application scenes needing to monitor real-time information, and improves the visual effect of data display through the autorotation animation of the 3D model, so that information transmission is more visual and interesting.

Drawings

The above and other objects, features and advantages of the present application will become more apparent by describing embodiments of the present application in more detail with reference to the attached drawings. The accompanying drawings are included to provide a further understanding of embodiments of the application and are incorporated in and constitute a part of this specification, illustrate the application and together with the embodiments of the application, and not constitute a limitation to the application. In the drawings, like reference numerals generally refer to like parts or steps.

FIG. 1 is a diagram of a display effect provided by an embodiment.

Fig. 2 is a diagram showing effects provided by another embodiment.

Fig. 3 is a flow chart of a 3d large screen rotation display method based on three.

Fig. 4 is a diagram showing effects provided by an embodiment of the present application.

Fig. 5 is a diagram showing effects provided by another embodiment of the present application.

Fig. 6 is a view showing an effect provided by another embodiment of the present application.

Fig. 7 is a flow chart of a 3d large screen rotation display method based on three.

Fig. 8 is a schematic diagram of a portion of a 3d large screen rotation display method based on three.

Fig. 9 is a schematic partial flow chart of a 3d large screen rotation display method based on three.

Fig. 10 is a schematic structural diagram of a 3d large screen rotation display device based on three.

Fig. 11 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Detailed Description

The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

Summary of the application

First, some terms related to the present application will be described:

Three.js framework a three-dimensional engine running on the basis of native WebGL encapsulation.

WebGL WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics in a web browser. It is based on the OpenGL ES (OpenGL for Embedded Systems) standard, allowing developers to utilize the graphics processing capabilities of the browser to create complex graphics, visual effects, and interactive experiences.

CSS (cascading style sheet, CASCADING STYLE SHEETS) is a markup language for describing the presentation style and style of a document (e.g., an HTML document). The method can control the appearance, layout and style of elements in the webpage, so that the webpage design is more flexible and attractive.

JavaScript (often abbreviated as JS) is a multi-modal, high-level interpreted programming language based on prototype and first-class functions that supports object-oriented programming, instruction-oriented programming, and functional programming.

Div node div is a generic container element used to organize and wrap content in HTML. It is a block-level element that is typically used to partition and organize different sections or portions of a web page, and can be patterned and layout controlled by CSS.

SETINTERVAL function SETINTERVAL is a function in JavaScript that is used to periodically execute a specified block of code or function. It may repeat a task for a certain time interval until cancelled or the page is closed.

DOM (document object model ) is a way to express and process documents such as HTML, XML, etc., which parses the document into a structure of nodes and objects that allows developers to access and modify the content, structure, and style of the document through a programming language such as JavaScript.

Window. RequestAnimationFrame A window. RequestAnimationFrame is a browser API for executing animations that allows a developer to execute specified functions prior to the next redraw of the browser, typically for achieving a smooth animation effect.

MTLLoader: MTLLoader is one of the loaders in three.js for loading model files based on the wavefront.obj file format. MTLLoader is responsible for loading the. Mtl texture file associated with the. Obj file. In the wavefront. Obj format, the texture information of the model is typically stored in a separate. Mtl file. MTLLoader are able to parse and load these texture files and apply them to the corresponding models to ensure that the models correctly display their texture and texture in three.

OBJLoader: OBJLoader is a loader in three.js for loading and parsing 3D model files in the wavefront.obj file format. Through OBJLoader, the model file saved in the. Obj format can be loaded into the three. Js scene.

CanvasTexture: canvasTexture is a texture type in three.js that allows developers to render objects in three.js using the contents of the HTML5< canvas > element as texture. This texture type is very flexible because a developer can dynamically draw graphics, text, images, etc. on < canvas > and apply them as textures to objects in three.

Mesh object in three.js Mesh is one of the basic elements representing a three-dimensional object. It is an entity composed of Geometry and materials for rendering and displaying objects in three.

With the continuous development of digital economy, various industries have been continuously added to digital transformation teams. The digital management system, the intelligent terminal, the data real-time display monitoring center and the like can be realized without the need of digital transformation. The visual digital large screen plays a very important role in the process, wherein the visual digital large screen is a common service expression form of current data display, service monitoring, command scheduling and the like, and has a cool and dazzling effect display of technical compositions such as visual charts, effect decoration, event operation and the like.

Currently, the visual digital large screen is widely applied to the fields of business, education, finance, industrial internet and the like, the visual large screen realized by the prior art generally shows some core index data at the right center, the index data are often updated and changed in real time, and in order to be attractive and highlight the dynamic property of the large screen, many users also require that the middle index data can be changed in a rotating way all the time (the effect is similar to the revolution of a plurality of satellites around the planet), as shown in fig. 1 and 2, the rotation effect of the large screen index data realized by the mainstream 2 d-based css, javascript and the like in the prior art is realized. Although this implementation technique can achieve the corresponding effect, there are some problems. First, at the display level, the index body of the rotation effect is also some div nodes of 2d, and the effect is not as beautiful as a 3d graph in the rotation (or revolution) process. Secondly, in the technical aspect, if the rotation of the index node is realized mainly based on css when the rotation effect of the index data is realized, a large amount of logic judgment and curve calculation are needed to realize the rotation of the div node because css is not a complete programming language of the figure, and the rotation is difficult to realize. However, if the rotation of the index node is mainly implemented based on javascript, although the rotation of the div node can be implemented, it is necessary to use a timer function such as SETINERVAL (or window. Requestanimation frame) and a trigonometric function (sine, cosine, etc.) to calculate, which are complicated to implement, and the performance is inferior to css (because the browser can optimize css and process animation effects by using hardware acceleration) in the implementation of a specific animation effect. In order to optimize the defects of the prior art, the invention provides a method for realizing the display effect of the 3d large screen rotation index data based on three.js. The method for loading the 3d model is utilized to render an integral three-dimensional index data display area, the data, pictures and the like which need to be changed are converted into canvasTexture, the canvasTexture is added into the materials of the child Mesh objects of the 3d model, the effect of displaying the data updated in real time on the 3d model is achieved, and finally the rotation (autorotation) effect of the 3d model is achieved by increasing the y-axis coordinate of the rotation attribute of the 3d model.

Having described the basic principles of the present application, various non-limiting embodiments of the present application will now be described in detail with reference to the accompanying drawings.

Exemplary method

Fig. 3 is a flow chart of a 3d large screen rotation display method based on three. As shown in fig. 3, the method includes the following.

Step S310, obtaining data to be displayed in real time;

specifically, in the scheme provided by the application, the data to be displayed can be obtained from the data source. The scheme provided by the application may involve reading from a database, requesting access through a network, or extracting information from other real-time data streams.

Step S320, generating canvasTexture based on the data to be displayed and a preset display rule;

Particular implementations may include creating an HTML5< canvas > element using JavaScript. The data to be presented is drawn on < canvas > by a 2D context (2D), which may include text, charts, icons, etc. The contents of < canvas > are converted to canvasTexture by calling the. toDataURL () method of the canvas element and passing the returned data URL to the three.canvas texture construction function.

Step S330, applying canvasTexture to the material of a child Mesh object of a preset 3D model, wherein the preset 3D model is a pre-designed 3D model loaded by using a thread. Js frame, and the preset 3D model is used as a data display area;

Specifically, the pre-designed 3D model may be a file in the format of. Obj or. Gltf, etc., and the model and materials are loaded using a tree. Js loader (e.g., OBJLoader). Traversing the sub-objects of the 3D model to find the Mesh object to which the texture needs to be applied. The materials (materials) of these Mesh objects are set to canvasTexture that were just created.

Step S340, the 3D model is controlled to rotate around a preset axis so as to create a dynamic visual effect of satellite orbiting revolution.

Specifically, in the animation cycle, the y-axis component of the rotation attribute of the 3D model is incremented to simulate the rotation effect. requestAnimationFrame is used to create a continuous animation loop so that each frame of the 3D model updates its rotation state. In the scheme provided by the application, an integral three-dimensional index data display area is rendered by a method of loading the 3d model, the data, pictures and the like which need to be changed are converted into canvasTexture, the canvasTexture is added into the material of the child Mesh object of the 3d model, so that the effect of displaying the data updated in real time on the 3d model is realized, and 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. The effects as shown in fig. 4, 5 and 6 can be achieved through the above scheme.

In some embodiments, the 3d large screen rotation display method based on the thread. Js further comprises setting DOM mounting points of the 3d model, setting scenes, cameras and a renderer of the thread. Js, and mounting HTML elements for rendering in the renderer to the DOM mounting points. Wherein the renderer is WebGLRenderer.

It should be noted that, setting the DOM mounting point of the 3d model, setting the scene of the thread. Js, the camera and the renderer, and adjusting the actual effect to be displayed to obtain the effect more in line with the expected effect. The renderer can be WebGLRenderer, webGLRenderer can utilize WebGL technology to realize hardware-accelerated 3D rendering, and can perform high-performance rendering in a modern browser supporting WebGL.

In practical applications, it is necessary to perform initialization first. Specifically, referring to fig. 7, a DOM mount point of the 3d model needs to be initialized, where the DOM mount point is typically an empty div element node, and the width and height of this node need to be specified (the width and height determine the width and height of the rendered 3d model). Initializing a scene, a camera, a renderer and the like of the thread, and mounting HTML elements for rendering in the renderer on a DOM mounting point. In this step, attention is paid to the selection of the initialized camera, and three.js provides a wide variety of camera types, such as PERSPECTIVECAMERA (perspective camera), orthographicCamera (quadrature camera), and so on. If a perspective camera is used, a mode of observing a scene by human eyes is simulated, and objects at a far distance can be seen to be smaller, and objects at a near place can be seen to be larger on the basis of the actual rendered model effect. If the orthogonal camera is used, parallel projection is displayed, and objects at far and near are identical in size, and no perspective effect is achieved. In this case, a quadrature camera is used. When using an orthogonal camera, some initialization parameters, including left, right, top, bottom attributes, need to be set, which determine the boundaries of the parallel projection of the view cone. near and far determine the closest and farthest distances that the camera can see. In the selection of the renderer, webGLRenderer (WebGL renderer), which is the most commonly used type of renderer, is selected in this case, and the hardware-accelerated 3D rendering is implemented using WebGL technology, enabling high-performance rendering in modern browsers supporting WebGL. In addition, when initializing the renderer, attention should also be paid to configuration antialias and alpha attribute true, where antialias is configured to true to enable antialiasing, where three. Js may attempt to reduce jagged edges of graphics during rendering, making the rendered image smoother. alpha is the transparency enabled meaning that when set to true, the created renderer will support the background transparent so that the three.js scene can be superimposed onto other HTML elements or the background. Then, the HTML elements for rendering in the renderer are mounted on the DOM mounting point, and this step can link the DOM mounting point and threejs renderer. Then, the light source needs to be initialized, in this case, the light source is selected to be ambient light (three. Ambientlight), and the white light source color is configured, in addition, the intensity of the light source can be configured according to different project display effects, and then the light source is added to the scene (if no light source is added, the 3d model which is likely to be rendered is dark or invisible).

Specifically, in some embodiments, the scheme provided by the application further comprises loading a material file corresponding to a preset 3D model by using MTLLoader, loading a model file corresponding to the preset 3D model by using OBJLoader, and displaying the preset 3D model based on the material file and the model file. So configured, MTLLoader allows for loading of complex material definitions, including different textures and colors. OBJLoader support loading 3D models in OBJ file format, which is widely used for 3D modeling and animation. The scheme provided by the application can further process the loaded model, such as adding animation, changing positions or applying different materials. Through the steps, the 3D model with the materials can be displayed on the webpage, so that abundant visual experience is brought to the user.

In practical application, a 3d model file meeting the service requirement and a corresponding material file thereof need to be prepared in advance, which is generally designed and given by a modeler.

In this case, a 3d model file in the obj format is loaded, and a corresponding default material (the material may be modified and enriched based on the default material file) file is attached.

In the specific implementation step, a default texture file is loaded by using MTLLoader, a texture object is obtained after loading is completed, a model file is loaded by using OBJLoader, a model object is obtained after loading is completed, and then the texture object is set on the model object. It should be noted that, because it takes a certain time to load the model file and the material file, if the model file is deployed on the server, the model file may not be loaded successfully due to a network or other special reasons.

If the model file and the material file are not successfully loaded, the user needs to be prompted that the model file is not acquired, and then the whole index display area cannot be successfully rendered. If the model file and the texture file are successfully loaded, setting a default texture object on the model object. And adding the contents such as the large screen index data, the pictures and the like to be displayed to the model.

Specifically, the model object is traversed first to obtain a plurality of child Mesh objects. Traversing each child Mesh object to generate a corresponding canvasTexture object, wherein the canvasTexture object contains large-screen index data, icons and the like to be displayed, and rendering canvasTexture on the child Mesh object in double-sided mode. A specific program flow chart is shown in fig. 8. First, a child Mesh object of a model object is obtained, a canvas 2d canvas object is created and antialiasing is enabled, which is enabled to minimize jagged edges of the content that is ultimately rendered by canvasTexture. An Image object is created for loading a background picture of a specified path. After the picture is loaded (whether the background picture can be normally loaded or not is judged, if the background picture cannot be normally loaded, a user needs to be prompted), the background picture is drawn into the canvas context object, and then the contents such as icons, characters (including large screen index data and the like which need to be displayed) and the like are drawn into the canvas context object. Then, a thread texture object, that is, canvasTexture object, is created, and the color space of the canvasTexture object is set to sRGB (default is three linear encoding), and if the color space is not modified, a deviation exists between the color of the finally rendered picture and the color of the original material. Then canvasTexture is loaded into the material of the Mesh object and double-sided rendering is configured. If the double-sided rendering is not configured, the finally rendered content only exists on one side of the 3d model, and no content exists on the other side. And finally, adjusting the size of the Mesh object to meet the service requirement. After this step, if no model rotation logic is needed, the scene and camera can be directly loaded into the three. Js renderer, and the resulting effect is shown in fig. 4, in which the index data and icon of the large screen are loaded onto a 3d threejs model (the model part is a box part circled in fig. 4, excluding the green fractional region). The setting can add the contents such as the large screen index data, the pictures and the like to be displayed to the model.

Further, the controlling the 3D model to rotate around a preset axis includes:

Specifically, if the rotation of the model needs to be implemented, the y-axis coordinate of the rotation attribute of the thread. Js model object needs to be circularly increased, so that the y-axis coordinate rotates around the y-axis on the spatial right-hand coordinate system. In this step, the window. Requestanimation frame method of the web browser itself needs to be called to implement the y-axis coordinates of the rotation attribute of the circularly incremented thread. Js model object. The javascript pseudocode implementation of this step is as follows:

Further, the scheme provided by the application further comprises the steps of monitoring whether the data to be displayed changes or not based on a preset monitor, acquiring the changed data to be displayed again if the data to be displayed changes, and regenerating canvasTexture based on the changed data to be displayed.

Referring to FIG. 9, the specific includes that a large screen index data content change listener needs to be created first, and the listener is implemented by listening to an index content object (in javascript, typically implemented by an agent or object. Defining property function). When the monitor monitors that the index content changes, the monitor informs canvasTexture of the generation function, and transmits new index content to canvasTexture to generate the function, the canvasTexture function generates new canvasTexture based on the new index content data and embeds the new canvasTexture into each child Mesh object of the 3d model, so that the original canvasTexture on the Mesh object can be covered, and finally real-time update of the display content on the 3d model is realized.

In summary, in the scheme provided by the application, the 3d model is loaded through the thread. Js, and the data content to be displayed is attached to the 3d model through a canvasTexture method, so that the 3d visual large screen display effect is realized, and compared with the 2d large screen effect realized through development of the traditional javascript+css, the 3d visual large screen display effect is more attractive and simpler, and has better performance.

Exemplary apparatus

The device embodiment of the application can be used for executing the method embodiment of the application. For details not disclosed in the embodiments of the apparatus of the present application, please refer to the embodiments of the method of the present application.

Fig. 10 is a block diagram of a 3d large screen rotation display device based on three. As shown in fig. 10, the apparatus includes:

an acquisition module 101, configured to acquire data to be displayed in real time;

the generating module 102 is configured to generate canvasTexture based on the data to be displayed and a preset display rule;

The application module 103 is used for applying canvasTexture to the material of the child Mesh object of the preset 3D model, wherein the preset 3D model is a pre-designed 3D model loaded by using a three.js frame, and the preset 3D model is used as a region for data display;

the rotation module 104 is configured to control the 3D model to rotate around a preset axis, so as to create a dynamic visual effect of satellite orbiting revolution.

In some embodiments, it is further to:

In some embodiments, the renderer is WebGLRenderer.

In some embodiments, it is further to:

Using MTLLoader to load a material file corresponding to a preset 3D model;

using OBJLoader to load a model file corresponding to a preset 3D model;

In some embodiments, the materials used for applying canvasTexture to the child Mesh object of the preset 3D model further include:

In some embodiments, the method further comprises autorotating the control 3D model about a preset axis, comprising:

In some embodiments, it is further to:

and regenerating canvasTexture based on the changed data to be displayed.

Exemplary electronic device

Next, an electronic device according to an embodiment of the present application is described with reference to fig. 11. Fig. 11 illustrates a block diagram of an electronic device according to an embodiment of the application.

As shown in fig. 11, the electronic device 1100 includes one or more processors 1110 and memory 1120.

The processor 1110 may be a Central Processing Unit (CPU) or other form of processing unit having data processing and/or instruction execution capabilities, and may control other components in the electronic device 1100 to perform desired functions.

Memory 1120 may include one or more computer program products that 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), and the like. The non-volatile memory may include, for example, read Only Memory (ROM), hard disk, flash memory, and the like. One or more computer program instructions may be stored on the computer readable storage medium that can be executed by the processor 1110 to implement the three.js-based 3d large screen rotation presentation method and/or other desired functions of the various embodiments of the present application described above. Various contents such as category correspondence may also be stored in the computer-readable storage medium.

In one example, the electronic device 1100 may also include an input device 1130 and an output device 1140, which are interconnected by a bus system and/or other form of connection mechanism (not shown).

In addition, the input device 1130 may include, for example, a keyboard, mouse, interface, and the like. The output device 1140 may output various information including analysis results and the like to the outside. The output devices 1140 may include, for example, a display, speakers, a printer, and a communication network and remote output devices connected thereto, etc.

Of course, only some of the components of the electronic device relevant to the present application are shown in fig. 11 for simplicity, components such as buses, input/output interfaces, and the like being omitted. In addition, the electronic device may include any other suitable components depending on the particular application.

Exemplary computer program product and computer readable storage Medium

In addition to the methods and apparatus described above, embodiments of the application may also be a computer program product comprising computer program instructions which, when executed by a processor, cause the processor to perform the steps in a three-dimensional, large-screen rotation presentation method according to various embodiments of the application described in the "exemplary methods" section of this specification.

The computer program product may write program code for performing operations of embodiments of the present application in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device, partly on a remote computing device, or entirely on the remote computing device or server.

Furthermore, embodiments of the present application may also be a computer-readable storage medium, having stored thereon computer program instructions that, when executed by a processor, cause the processor to perform the steps in a three.js-based 3d large screen rotation presentation method according to various embodiments of the present application described in the "exemplary methods" section above in this specification.

The computer readable storage medium may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may include, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of a readable storage medium include an electrical connection having 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The foregoing description has been presented for purposes of illustration and description. Furthermore, this description is not intended to limit embodiments of the application to the form disclosed herein. Although a number of example aspects and embodiments have been discussed above, a person of ordinary skill in the art will recognize certain variations, modifications, alterations, additions, and subcombinations thereof.

Claims

1. A 3D large-screen rotation display method based on three.js, characterized by comprising:

Obtain the data to be displayed in real time;

Generate canvasTexture based on the data to be displayed and the preset display rules, including:

Use JavaScript to create an HTML5 <canvas> element, draw the data to be displayed on the <canvas> through a 2D context, and convert the contents of the <canvas> to a canvasTexture by calling the .toDataURL() method of the canvas element and passing the returned data URL to the THREE.CanvasTexture constructor;

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, characterized in that it 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. According to the three.js-based 3D large-screen rotation display method of claim 1, it is characterized in that the renderer is WebGLRenderer.

4. The 3D large-screen rotation display method based on three.js according to claim 1, characterized in that it 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 rotating 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 comprises:

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 comprises:

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, characterized in that it 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 by comprising:

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:

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:

9. An electronic device, comprising:

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 a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a 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.