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

Abstract

The application relates to the technical field of data security, in particular to a 3d large screen rotation display method and device based on three. The method 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 the child Mesh object of the preset 3D model; the preset 3D model is a pre-designed 3D model loaded by using a three.js frame; 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. The updated data can be displayed in real time, and the method is very useful for application scenes needing to monitor real-time information; through the rotation animation of the 3D model, the visual effect of data display is improved, and information transmission is more visual 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. And the visual digital large screen plays a very important role in the visual digital large screen: the visual digital large screen is a common business expression form of current data display, business monitoring, command scheduling, and has a cool and dazzling effect display formed by visual charts, effect decoration, event operation and other technologies. 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 the child Mesh object of the preset 3D model; the preset 3D model is a pre-designed 3D model loaded by using a three.js frame; 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 DOM mounting points of the 3d model; setting a scene, a camera and a renderer of thread. Js, and mounting HTML elements for rendering in the renderer to a DOM mounting point;

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; the preset 3D model is a pre-designed 3D model loaded by using a three.js frame; 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 application provides a 3d large screen rotation display method based on three.js, which 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; applying canvasTexture to the material of the child Mesh object of the preset 3D model; the preset 3D model is a pre-designed 3D model loaded by using a three.js frame; 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. The setting can display the updated data in real time, and is very useful for application scenes needing to monitor real-time information; through the rotation animation of the 3D model, the visual effect of data display is improved, and 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 based on native WebGL packaging.

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: in HTML, div is a generic container element used to organize and wrap content. 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 for periodically executing 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. Requestanimation frame: a window. Requestanimation frame is a browser API for executing animations that allows a developer to execute a specified function 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 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 a developer 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. And the visual digital large screen plays a very important role in the visual digital large screen: the visual digital large screen is a common business expression form of current data display, business monitoring, command scheduling, and has a cool and dazzling effect display formed by visual charts, effect decoration, event operation and other technologies.

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. Rendering an integral three-dimensional index data display area by using a method of loading a 3d model, and adding the data, pictures and the like which need to be changed into materials of a child Mesh object of the 3d model by converting the data, the pictures and the like into canvasTexture so as to realize the effect of displaying the data updated in real time on the 3d model; and finally, increasing the y-axis coordinate of the rotation attribute of the 3d model to realize the rotation (autorotation) effect 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;

The specific implementation manner can comprise the following steps: an HTML5< canvas > element is created 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 the child Mesh object of the preset 3D model; the preset 3D model is a pre-designed 3D model loaded by using a three.js frame; 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 using a method of loading the 3d model, and the data, pictures and the like which need to be changed are converted into canvasTexture and 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, increasing the y-axis coordinate of the rotation attribute of the 3d model to realize the rotation (autorotation) effect 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 three.js further comprises: setting DOM mounting points of the 3d model; setting a scene, a camera and a renderer of thread. Js, and mounting HTML elements for rendering in the renderer to a DOM mounting point. Wherein the renderer is WebGLRenderer.

It should be noted that DOM mounting points of the 3d model are set; setting a scene of thread, a camera and a renderer, and setting specific contents to adjust the actual effect to be displayed, so as to obtain the effect more in line with expectations. The renderer may be WebGLRenderer; webGLRenderer can implement hardware-accelerated 3D rendering using WebGL technology, enabling high performance rendering in modern browsers that support 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 solution provided by the present application further includes: 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. 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.

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.

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 is required to be prompted), and the background picture is drawn into the canvas context object; and then drawing the contents such as icons, characters (including large screen index data and the like which need to be displayed) and the like 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 is completed, if model rotation logic is not needed, the scene and the camera can be directly loaded into the three. Js renderer, and the final effect is as shown in fig. 4: the index data and icons for the large screen are loaded onto a 3d threejs model (the model portion is the box portion circled in fig. 4, excluding the green score area). 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:

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.

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 following steps: 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.

Referring to fig. 9, specifically, the method includes: first, a large screen pointer data content change listener needs to be created, which is implemented by listening to the pointer content object (typically implemented by proxy or object. Definition property function in javascript). 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;

an application module 103, configured to apply canvasTexture to a material of a child Mesh object of a preset 3D model; the preset 3D model is a pre-designed 3D model loaded by using a three.js frame; the preset 3D model is used as a data display area;

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:

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

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;

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

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

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 method further comprises autorotating the control 3D model about a preset axis, comprising:

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, it is further to:

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.

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 further include: an input device 1130 and an output device 1140, 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 the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, random Access Memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk 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 (10)

1. The 3d large screen rotation display method based on three.js is characterized by comprising the following steps of:

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 the child Mesh object of the preset 3D model; the preset 3D model is a pre-designed 3D model loaded by using a three.js frame; 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.

2. The three-dimensional (3 d) large screen rotation display method based on three.js according to claim 1, further comprising:

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

3. The three-dimensional (3 d) large screen rotation display method based on three.js according to claim 1, wherein the renderer is WebGLRenderer.

4. The three-dimensional (3 d) large screen rotation display method based on three.js according to claim 1, 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.

5. The method for displaying 3D large-screen rotation based on three.js according to claim 1, wherein the applying canvasTexture to the material of the child Mesh object of the preset 3D model comprises:

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

6. The three.js-based 3D large screen rotation display method of claim 1, wherein the controlling the 3D model to spin about a preset axis includes:

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.

7. The three-dimensional (3 d) large screen rotation display method based on three.js according to claim 1, 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.

8.3 D large-screen rotation display device based on three. Js, characterized by comprising:

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; the preset 3D model is a pre-designed 3D model loaded by using a three.js frame; 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.

9. An electronic device, comprising:

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

The processor is configured to implement the 3d large screen rotation display method based on three.js according to any one of claims 1 to 7 by running a program in the memory.

10. A computer readable storage medium, characterized in that the computer readable storage medium has stored thereon a computer program which, when executed by a processor, causes the processor to perform the three.js-based 3d large screen rotation presentation method as claimed in any one of claims 1 to 7.