Three.js-based three-dimensional chemical molecule model display method

Abstract

The invention provides a three-dimensional chemical molecule model display method based on Three.js, and belongs to the technical field of data visualization. The method comprises the following steps: S1, acquiring molecular data of a chemical molecular model needing to be displayed; s2, a thread. Js scene is initialized; s3, according to the molecular data, creating a molecular model in a thread. Js scene; s4, according to the molecular data, an atomic model is created in a thread. Js scene; and S5, according to the molecular data, creating an atom internal model in a thread. Js scene. According to the method, the display mode of the chemical molecule model is improved by utilizing the Three.js technology, and the method has the advantages of being more flexible, visual and high in interactivity, so that the understanding and learning effects of students on the chemical molecule structure are improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of data visualization, and in particular, relates to a three.js-based three-dimensional chemical molecule model display method. Background Art

[0002] In chemistry classes, in order to facilitate students to further learn and understand molecular structures, chemical molecular structure models are mostly displayed. However, the existing chemical molecular model display method generally installs the molecular structure model on a display device for display. The existing display method has the following disadvantages:

[0003] 1. Limitations of planar chemical structure diagrams:

[0004] Plane structure diagrams cannot intuitively display the three-dimensional spatial configuration and spatial orientation of molecules, and it is difficult for students to understand the actual arrangement of molecules in space.

[0005] The planar diagrams of some complex molecules cannot accurately describe the spatial positions of all atoms and the orientations of bonds, which limits students' comprehensive understanding of molecular structure.

[0006] 2. Limitations of traditional display devices:

[0007] Traditional display devices fix chemical molecule models, so students can only observe the molecular structure from a fixed angle, making it difficult to fully understand the three-dimensional configuration of the molecule.

[0008] The need to walk around the device to observe affects students' learning experience and limits their in-depth understanding of molecular structure.

[0009] 3. Difficulty understanding abstract concepts:

[0010] Molecular structure involves some abstract concepts, such as stereochemistry and chirality, which may be difficult for students to understand through traditional two-dimensional teaching materials. The lack of intuitive three-dimensional presentation may make it difficult for students to understand these abstract concepts.

[0011] 4. Individual differences among students:

[0012] Students have different understandings of spatial structures and different degrees of acceptance of chemical concepts. Traditional teaching methods are difficult to meet the learning needs of different students. Some students may prefer to learn through visual and interactive methods, and traditional flat teaching materials cannot fully meet their learning methods.

[0013] The existing methods of modeling chemical molecular structures generally require the use of physical objects for auxiliary teaching, and the display device is prone to damage or loss during use;

[0014] To this end, this application proposes a three-dimensional chemical molecular model display method based on three.js. Summary of the invention

[0015] The present invention aims to overcome the shortcomings of the prior art and proposes a three-dimensional chemical molecular model display method based on three.js to achieve the following purposes: to provide a more convenient, intuitive and flexible way to display chemical molecular models to improve the effect and experience of chemistry teaching.

[0016] In order to achieve the above object, the technical solution adopted by the present invention is: a three-dimensional chemical molecular model display method based on three.js, the method comprising the following steps:

[0017] S1. Obtaining molecular data of the chemical molecular model to be displayed;

[0018] S2, initialize the three.js scene;

[0019] S3. Creating a molecular model in a three.js scenario according to the molecular data;

[0020] S4. Creating an atomic model in a three.js scene according to the molecular data;

[0021] S5. Create an atomic internal model in a three.js scene according to the molecular data.

[0022] Preferably, in step S2, a regDollScene class is defined to manage the initialization and rendering of a three.js scene and the interaction with objects in the scene. The regDollScene class includes:

[0023] (1) Constructor: used to construct three.js objects and initialize the scene. The objects include scenes, cameras, lights, renderers, and controllers.

[0024] (2) initGridHelper method: used to initialize the grid helper, set the size and color of the grid according to the passed parameters, and add the grid helper to the scene;

[0025] (3) initOrbitControl method: used to initialize the orbit controller, allowing the user to control the rotation and scaling of the scene with the mouse;

[0026] (4) setLockChoice and setLockScene methods: used to set the lock selection object and lock scene status, and control the user's interaction in the scene;

[0027] (5) initTransformControls method: used to initialize the transformation controller and perform translation, rotation, and scaling operations on objects in the scene;

[0028] (6)render method: used to render the scene, update the state of objects in the scene and perform rendering operations.

[0029] Preferably, in step S2, a SmallScene class is defined to manage a simple three.js scene, and the SmallScene class includes:

[0030] (1) Constructor: used to construct and initialize three.js objects, including scenes, cameras, lights, renderers, and controllers;

[0031] (2) render method: used to render the scene, update the state of objects in the scene and perform rendering operations;

[0032] (3) initScene method: used to initialize the scene and set the background color;

[0033] (4) initOrbitControls method: used to initialize the orbit controller, allowing the user to control the rotation and scaling of the scene with the mouse;

[0034] (5) initCamera method: used to initialize the perspective camera, set the camera position and orientation, and add the camera to the scene;

[0035] (6) initLights method: used to initialize lights and set light properties, including ambient light and spotlight;

[0036] (7) initRenderer method: used to initialize the renderer, set anti-aliasing properties, and add the renderer's DOM element to the user-selected DOM element;

[0037] (8) addObject method and removeObject method: used to add and remove objects to the scene;

[0038] (9) addRenderFun method and removeRenderFunc method: used to add and remove rendering functions, which will be called in each rendering cycle.

[0039] Preferably, in step S3, a MoleculeModule class is defined for creating a molecular model, and the MoleculeModule class includes:

[0040] (1) Constructor: used to construct a molecular model object based on molecular data;

[0041] (2) showMoleNameText method: used to display the text of the molecule name in the scene;

[0042] (3) initModule method: used to initialize the molecular model. It traverses the atomic data in the molecule, creates a corresponding sphere to represent the atomic nucleus according to the coordinates and properties of each atom, and combines these atomic nuclei into a THREE.Group object to represent the entire molecular model.

[0043] (4) getTextCanvas method: used to create a Canvas texture with text to display the atom name;

[0044] (5)cloneMolecule method: used to clone the current molecular model object.

[0045] Preferably, in the constructor of the molecular model object, the showText parameter is set to control the display of the text.

[0046] Preferably, in step S4, an AtomModel class is defined for creating an atomic model, and the AtomModel class includes:

[0047] (1) Constructor: used to construct an atomic model object based on molecular data;

[0048] (2) initNucleus method: used to create the nucleus, that is, by creating a sphere geometry and a Phong material, then combining them into a THREE.Mesh object to represent the nucleus and adding it to the scene;

[0049] (3) initEleOrbit method: used to create electron orbitals. It creates electron orbitals based on the number of electrons in the atom and the orbital radius, and places a corresponding number of electrons in each orbital.

[0050] (4) getEleOrbit method: used to create a single electron orbit, that is, by creating a ring geometry and a sphere geometry to represent the electron orbit and the electron respectively, and then combining them into a THREE.Object3D object to represent the entire electron orbit;

[0051] (5) getTextCanvas method: used to create a Canvas texture with text to display the atom name and the number of electrons in the electron orbital;

[0052] (6)renderEvent method: used to rotate the electrons in the electron orbit to achieve dynamic effects.

[0053] Preferably, the method for constructing the atomic model comprises the following steps:

[0054] S41, importing corresponding chemical element atom position data through user selection;

[0055] S42. Create a sphere representing the nucleus through the initNucleus method, and set its material, color and texture;

[0056] S43, using the initEleOrbit method, the number and radius of the electron orbits are calculated according to the atomic number, and a corresponding number of electron orbits are created;

[0057] S44, creating a corresponding electron orbit according to the number of electrons in each electron orbit and the corresponding electron orbit radius through the getEleOrbit method;

[0058] S45. Create a Canvas texture with text content according to the string content, color and size selected by the user through the getTextCanvas method, and return a texture object based on three.js;

[0059] S46. Update the rotation state of the electron through the renderEvent method, traverse all electrons and randomly rotate their angles;

[0060] S47. Render the AtomModel model into the scene.

[0061] Preferably, in the step S41, a helper with a coordinate axis mark is added to the three.js scene through THREE.AxisHelper to locate and move the position and direction of the chemical atom.

[0062] Preferably, in step S5, an AtomInside class is defined to create an atomic internal model, and the AtomInside class includes:

[0063] (1) Constructor: used to construct an atomic internal model object based on molecular data. The constructor parameters of the atomic internal model include the number of electrons and the number of protons.

[0064] (2) initAtomInside method: First, create the geometry and material of the nucleus, then create a THREE.Mesh object based on the configuration information of the molecule data and add it to the scene; then create the geometry and material of the proton, create a THREE.Mesh object to represent the proton, set its position, and add it to the scene; if the number of neutrons inside the atom is greater than 0, clone the proton object to create a neutron, set its position and material, and add it to the scene.

[0065] (3) getTextCanvas method: used to create a text label for displaying the number of electrons and neutrons based on the molecular data configuration information and add it to the scene.

[0066] Preferably, the method of the present application further defines a library for creating an interactive debugging panel, the library comprising:

[0067] (1) DatGUIParams interface: defines the parameters that can be passed in when creating a DatGUI instance, including automatic placement, initial close, close button position, whether it can be hidden, and loading status;

[0068] (2) Defines the DatGUI class, which is used to create and manage the debug panel, including adding controllers, adding color controllers, adding folders, and saving states;

[0069] (3) Defines the DatGUIController class: used to manage a single controller, including managing the controller's DOM elements, associated objects, and properties.

[0070] The technical effects of the present invention are:

[0071] 1. Improve observation experience: three.js supports the use of three-dimensional chemical molecular model display on the web, allowing students to view molecular structure models anytime and anywhere through devices such as computers, tablets or mobile phones, without relying on fixed display devices, thereby improving observation experience and convenience.

[0072] 2. Enhance interactivity: The three-dimensional chemical molecular model display method based on three.js is usually interactive. For example, the molecular structure can be freely adjusted and observed by dragging, zooming, rotating, etc. This interactivity can help students better understand the three-dimensional spatial arrangement of molecular structures.

[0073] 3. Reduce costs and risks: Compared with traditional physical display devices, the web display method does not need to purchase and maintain physical models, which can reduce costs. At the same time, it avoids the problem of physical loss or loss, and improves the durability and reliability of the display.

[0074] 4. Promote distance teaching: In the modern teaching environment, distance teaching and online learning are becoming more and more common. The web-based three-dimensional chemical molecular model display method can be easily integrated into the online teaching platform to promote the development of distance teaching.

[0075] 5. Stimulate learning interest: The method of this application has a strong data integration capability. It can easily combine chemical molecular structures with related text, images, videos and other multimedia information to form a colorful teaching environment. This can not only help students understand the molecular structure more comprehensively, but also stimulate their interest and enthusiasm in learning.

[0076] 6. Excellent scalability: This method is also highly scalable. With the continuous development and improvement of three.js technology and the emergence of new chemistry teaching needs, this method can be continuously upgraded and optimized to meet the teaching needs of higher levels and wider fields. BRIEF DESCRIPTION OF THE DRAWINGS

[0077] Figure 1 A flow chart is created for the atomic model of an embodiment of the present invention. DETAILED DESCRIPTION

[0078] The following is a further detailed description of the specific implementation of the present invention by describing the embodiments with reference to the accompanying drawings, with the purpose of helping those skilled in the art to have a more complete, accurate and in-depth understanding of the inventive concept and technical solution of the present invention and to facilitate its implementation. In order to make the technical solution of the present invention clearer, the present invention is explained by the following embodiments.

[0079] As mentioned above, three.js is an open source JavaScript library based on WebGL technology, which provides powerful 3D rendering capabilities, can achieve high-quality 3D graphics rendering, and make the molecular model display more realistic. Three.js provides a wealth of classes and functions for object creation and operation, making it relatively simple to implement 3D graphics on web pages, and supports the customization of classes and functions.

[0080] This embodiment proposes a three-dimensional chemical molecular model display method based on three.js, and the method includes the following steps:

[0081] S1. Obtaining molecular data of the chemical molecular model to be displayed;

[0082] S2, initialize the three.js scene;

[0083] S3. Creating a molecular model in a three.js scenario according to the molecular data;

[0084] S4. Creating an atomic model in a three.js scene according to the molecular data;

[0085] S5. Create an atomic internal model in a three.js scene according to the molecular data.

[0086] Specifically, in step S2 of this embodiment, a regDollScene class is defined to manage the initialization and rendering of a three.js scene and the interaction with objects in the scene. The regDollScene class includes but is not limited to:

[0087] (1) Constructor: used to construct three.js objects and initialize the scene. The objects include scenes, cameras, lights, renderers, controllers, etc., and some event listeners are usually added. The constructor needs to obtain corresponding parameters for scene initialization. In the regDollScene class, the constructor parameters include the rendered DOM element, whether to display the coordinate axis, whether to display the grid assistant, the background color setting, the grid line color setting, and the user selection status.

[0088] In this embodiment, an initSceneVO class is also defined to describe the parameters when initializing the scene. The initSceneVO class sets multiple mutation functions of different types, including but not limited to:

[0089] oINIT_REGDOLL_SCENE: initialize the scene.

[0090] oADD_OBJECT: Add an object to the scene.

[0091] oREMOVE_OBJECT: Removes an object from the scene.

[0092] oRENDER_SCENE: Render the scene.

[0093] oSET_BACKGROUND_TEXT_URE_CUBE: Set background texture.

[0094] oSET_LOCK_CHOICE: Sets the lock choice state.

[0095] oSET_NOW_SELECT_OBJ: Set the currently selected object.

[0096] oSET_LOCK_SCENE: Set the scene lock state.

[0097] SET_RENDER_SCENE: Set the scene rendering status.

[0098] Each mutation function receives state and payload parameters and performs corresponding operations according to different mutation types, such as initializing the scene, adding objects, removing objects, rendering the scene, etc.

[0099] (2) initGridHelper method: used to initialize the grid helper, set the size and color of the grid according to the passed parameters, and add the grid helper to the scene;

[0100] (3) initOrbitControl method: used to initialize the orbit controller, allowing the user to control the rotation and scaling of the scene with the mouse;

[0101] (4) setLockChoice and setLockScene methods: used to set the lock selection object and lock scene status, and control the user's interaction in the scene;

[0102] (5) initTransformControls method: used to initialize the transformation controller and perform translation, rotation, and scaling operations on objects in the scene;

[0103] (6)render method: used to render the scene, update the state of objects in the scene and perform rendering operations.

[0104] Furthermore, in step S2 of this embodiment, in order to process some simple three.js scenes, various complex methods defined in the regDollScene class are not required. This embodiment defines a SmallScene class for managing simple three.js scenes. The SmallScene class includes:

[0105] (1) Constructor: used to construct and initialize three.js objects, including scenes, cameras, lights, renderers, and controllers. The constructor of the SmallScene class mainly takes the rendered DOM element and background color as parameters. Through this constructor, the scene, camera, light, renderer, and track controller are initialized.

[0106] (2) render method: used to render the scene, update the state of objects in the scene and perform rendering operations, that is, by looping the rendering scene, executing each function in the rendering function array and rendering the scene.

[0107] (3) initScene method: used to initialize the scene and set the background color;

[0108] (4) initOrbitControls method: used to initialize the orbit controller, allowing the user to control the rotation and scaling of the scene with the mouse;

[0109] (5) initCamera method: used to initialize the perspective camera, set the camera position and orientation, and add the camera to the scene;

[0110] (6) initLights method: used to initialize lights and set light properties such as position and shadow. The lights include ambient light and spotlight.

[0111] (7) initRenderer method: used to initialize the renderer, set anti-aliasing properties, and add the renderer's DOM element to the user-selected DOM element;

[0112] (8) addObject method and removeObject method: used to add and remove objects to the scene;

[0113] (9) addRenderFun method and removeRenderFunc method: used to add and remove rendering functions, which will be called in each rendering cycle.

[0114] In addition, this embodiment introduces the following auxiliary functions when creating common objects or elements in a three.js scene:

[0115] (1) getGridHelper(size, divisions, gridColor): This function is used to create a grid helper to display the grid in the scene. It accepts three parameters: size represents the size of the grid, divisions represents the number of divisions of the grid, and gridColor is an optional parameter used to set the color of the grid. The function returns a THREE.GridHelper instance.

[0116] (2) getTrackArr(eleNum): This function returns an array representing the electron distribution according to the number of electrons passed in. Different electron distributions are returned according to different numbers of electrons. For example, for a hydrogen atom (the number of electrons is 1), it returns [1]; for a helium atom (the number of electrons is 2), it returns [2]; for an oxygen atom (the number of electrons is 8), it returns [2,6], etc.

[0117] (3) getDefaultAmbientLight(): This function is used to create a default ambient light, set the color and intensity of the light according to the configuration in SceneConfig, and return a THREE.AmbientLight instance.

[0118] (4) getDefaultSpotLight(sceneLen): This function is used to create a default spotlight, set some default properties such as position, angle, shadow, etc., and return a THREE.SpotLight instance. The parameter sceneLen is used to set the position of the light.

[0119] Specifically, in step S3 of this embodiment, a MoleculeModule class is defined to create a molecular model. The MoleculeModule class includes:

[0120] (1) Constructor: used to construct a molecular model object based on molecular data. The constructor parameters of the molecular model object include the relevant data of the molecule obtained in step S1, such as the molecular name, composition, etc. At the same time, in the constructor of the molecular model object, a customizable showText parameter is set to control the display of text.

[0121] (2) showMoleNameText method: used to display the text of the molecule name in the scene. It creates a SpriteText object (SpriteText is a commonly used extension library of the existing three.js, used to create text labels that can be rotated and scaled) and adds it to the scene.

[0122] (3) initModule method: used to initialize the molecular model. It traverses the atomic data in the molecule, creates a corresponding sphere to represent the atomic nucleus according to the coordinates and properties of each atom, and combines these atomic nuclei into a THREE.Group object to represent the entire molecular model.

[0123] (4) getTextCanvas method: used to create a Canvas texture with text to display the atom name;

[0124] (5)cloneMolecule method: used to clone the current molecular model object.

[0125] Specifically, in step S4 of this embodiment, an AtomModel class is defined to create an atomic model, and the AtomModel class includes:

[0126] (1) Constructor: used to construct an atomic model object based on molecular data. The constructor parameters of the atomic model object include the relevant data of the molecule in step S1, mainly the atomic data that make up the molecule.

[0127] (2) initNucleus method: used to create the nucleus, that is, by creating a sphere geometry and a Phong material, then combining them into a THREE.Mesh object to represent the nucleus and adding it to the scene;

[0128] (3) initEleOrbit method: used to create electron orbitals. It creates electron orbitals based on the number of electrons in the atom and the orbital radius, and places a corresponding number of electrons in each orbital.

[0129] (4) getEleOrbit method: used to create a single electron orbit, that is, by creating a torus geometry and a sphere geometry to represent the electron orbit and the electron respectively, and then combining them into a THREE.Object3D object to represent the entire electron orbit. The TorusGeometry class (a commonly used torus geometry creation library in three.js technology) generates a torus geometry based on the parameters of the electron orbit (such as the orbit radius) to represent the electron orbit. By adjusting these parameters, the size, shape, and subdivision of the orbit can be controlled to achieve different orbit effects.

[0130] (5) getTextCanvas method: used to create a Canvas texture with text to display the atom name and the number of electrons in the electron orbital;

[0131] (6)renderEvent method: used to rotate the electrons in the electron orbit to achieve dynamic effects.

[0132] Based on the above AtomModel class, such as Figure 1 As shown, the method for constructing the atomic model of this embodiment includes the following steps:

[0133] S41, importing the position data of the corresponding chemical element atoms through user selection. Preferably, in step S41, a helper with a coordinate axis mark is added to the three.js scene through THREE.AxisHelper (a coordinate axis helper creation tool commonly used in three.js technology) to locate and move the position and direction of the chemical atoms.

[0134] S42. Create a sphere representing the nucleus through the initNucleus method, and set its material, color and texture;

[0135] S43, using the initEleOrbit method, the number and radius of the electron orbits are calculated according to the atomic number, and a corresponding number of electron orbits are created;

[0136] S44, creating a corresponding electron orbit according to the number of electrons in each electron orbit and the corresponding electron orbit radius through the getEleOrbit method;

[0137] S45. Create a Canvas texture with text content according to the string content, color and size selected by the user through the getTextCanvas method, and return a texture object based on three.js;

[0138] S46. Update the rotation state of the electron through the renderEvent method, traverse all electrons and randomly rotate their angles;

[0139] S47. Render the AtomModel model into the scene.

[0140] Specifically, in step S5 of this embodiment, an AtomInside class is defined to create an atomic internal model, and the AtomInside class includes:

[0141] (1) Constructor: used to construct an atomic internal model object based on molecular data. The constructor parameters of the atomic internal model include the number of electrons and the number of protons. At the same time, the constructor of the atomic internal model can combine the number of electrons and the number of protons of the atom to calculate the number of neutrons.

[0142] (2) initAtomInside method: First, create the geometry and material of the nucleus, then create a THREE.Mesh object based on the configuration information of the molecule data and add it to the scene; then create the geometry and material of the proton, create a THREE.Mesh object to represent the proton, set its position, and add it to the scene; if the number of neutrons inside the atom is greater than 0, clone the proton object to create a neutron, set its position and material, and add it to the scene;

[0143] (3) getTextCanvas method: used to create a text label for displaying the number of electrons and neutrons based on the molecular data configuration information and add it to the scene. Similarly, the SpriteText class is used to create a text label object.

[0144] Furthermore, the method of the present application also defines a library for creating an interactive debugging panel, which facilitates the interaction between humans and models. The library includes:

[0145] (1) DatGUIParams interface: defines the parameters that can be passed in when creating a DatGUI instance (DatGUI is a lightweight user interface library in the prior art that is used to create interactive controls in Web applications). The parameters include automatic placement, initial close, close button position, whether it can be hidden, loading status, etc.

[0146] (2) The DatGUI class is defined to create and manage the debug panel, including adding controllers, adding color controllers, adding folders, and saving states. The instance of this class has attributes such as controller arrays, folder objects, and DOM elements.

[0147] (3) Defines the DatGUIController class: used to manage a single controller, including managing the controller's DOM elements, associated objects and properties, etc. This class provides a series of methods for setting controller options, monitoring value changes, getting and setting values, etc.

[0148] The three-dimensional chemical molecular model display method established in this application based on three.js uses modern technical means to improve the display method of chemistry teaching. Through various customized classes in three.js, a more flexible, intuitive and interactive chemical molecular model display method is provided. At the same time, the present invention provides a series of methods that can realize human-computer interaction in the customized class, such as the initOrbitControls method, etc., which improves the interactivity of the present invention, thereby enhancing students' understanding of chemical molecular structures and learning effects.

[0149] The present invention is described above by way of example in conjunction with the accompanying drawings. Obviously, the specific implementation of the present invention is not limited to the above-mentioned methods. As long as various non-substantial improvements are made using the method concept and technical solution of the present invention; or the above concept and technical solution of the present invention are directly applied to other occasions without improvement, they are all within the protection scope of the present invention.

Claims

1. A three-dimensional chemical molecular model display method based on three.js, characterized in that: The method comprises the following steps: S1. Obtaining molecular data of the chemical molecular model to be displayed; S2, initialize the three.js scene; S3. Creating a molecular model in a three.js scenario according to the molecular data; S4. Creating an atomic model in a three.js scene according to the molecular data; S5. Create an atomic internal model in a three.js scene according to the molecular data.

2. A three-dimensional chemical molecular model display method based on three.js according to claim 1, characterized in that: In step S2, a regDollScene class is defined to manage the initialization and rendering of the three.js scene and the interaction with the objects in the scene. The regDollScene class includes: (1) Constructor: used to construct three.js objects and initialize the scene. The objects include scenes, cameras, lights, renderers, and controllers. (2) initGridHelper method: used to initialize the grid helper, set the size and color of the grid according to the passed parameters, and add the grid helper to the scene; (3) initOrbitControl method: used to initialize the orbit controller, allowing the user to control the rotation and scaling of the scene with the mouse; (4) setLockChoice and setLockScene methods: used to set the lock selection object and lock scene status, and control the user's interaction in the scene; (5) initTransformControls method: used to initialize the transformation controller and perform translation, rotation, and scaling operations on objects in the scene; (6)render method: used to render the scene, update the state of objects in the scene and perform rendering operations.

3. A three-dimensional chemical molecular model display method based on three.js according to claim 1 or 2, characterized in that: In step S2, a SmallScene class is defined to manage a simple three.js scene. The SmallScene class includes: (1) Constructor: used to construct and initialize three.js objects, including scenes, cameras, lights, renderers, and controllers; (2) render method: used to render the scene, update the state of objects in the scene and perform rendering operations; (3) initScene method: used to initialize the scene and set the background color; (4) initOrbitControls method: used to initialize the orbit controller, allowing the user to control the rotation and scaling of the scene with the mouse; (5) initCamera method: used to initialize the perspective camera, set the camera position and orientation, and add the camera to the scene; (6) initLights method: used to initialize lights and set light properties, including ambient light and spotlight; (7) initRenderer method: used to initialize the renderer, set anti-aliasing properties, and add the renderer's DOM element to the user-selected DOM element; (8) addObject method and removeObject method: used to add and remove objects to the scene; (9) addRenderFun method and removeRenderFunc method: used to add and remove rendering functions, which will be called in each rendering cycle.

4. The three-dimensional chemical molecular model display method based on three.js according to claim 1, characterized in that: In step S3, a MoleculeModule class is defined for creating a molecular model. The MoleculeModule class includes: (1) Constructor: used to construct a molecular model object based on molecular data; (2) showMoleNameText method: used to display the text of the molecule name in the scene; (3) initModule method: used to initialize the molecular model. It traverses the atomic data in the molecule, creates a corresponding sphere to represent the atomic nucleus according to the coordinates and properties of each atom, and combines these atomic nuclei into a THREE.Group object to represent the entire molecular model. (4) getTextCanvas method: used to create a Canvas texture with text to display the atom name; (5)cloneMolecule method: used to clone the current molecular model object.

5. The three-dimensional chemical molecular model display method based on three.js according to claim 4, characterized in that: In the constructor of the molecular model object, set the showText parameter to control the display of text.

6. The three.js-based three-dimensional chemical molecular model display method according to claim 1, characterized in that: In step S4, an AtomModel class is defined to create an atomic model. The AtomModel class includes: (1) Constructor: used to construct an atomic model object based on molecular data; (2) initNucleus method: used to create the nucleus, that is, by creating a sphere geometry and a Phong material, then combining them into a THREE.Mesh object to represent the nucleus and adding it to the scene; (3) initEleOrbit method: used to create electron orbitals. It creates electron orbitals based on the number of electrons in the atom and the orbital radius, and places a corresponding number of electrons in each orbital. (4) getEleOrbit method: used to create a single electron orbit, that is, by creating a ring geometry and a sphere geometry to represent the electron orbit and the electron respectively, and then combining them into a THREE.Object3D object to represent the entire electron orbit; (5) getTextCanvas method: used to create a Canvas texture with text to display the atom name and the number of electrons in the electron orbital; (6)renderEvent method: used to rotate the electrons in the electron orbit to achieve dynamic effects.

7. A three-dimensional chemical molecular model display method based on three.js according to claim 6, characterized in that: The method for constructing the atomic model comprises the following steps: S41, importing corresponding chemical element atom position data through user selection; S42. Create a sphere representing the nucleus through the initNucleus method, and set its material, color and texture; S43, using the initEleOrbit method, the number and radius of the electron orbits are calculated according to the atomic number, and a corresponding number of electron orbits are created; S44, creating a corresponding electron orbit according to the number of electrons in each electron orbit and the corresponding electron orbit radius through the getEleOrbit method; S45. Create a Canvas texture with text content according to the string content, color and size selected by the user through the getTextCanvas method, and return a texture object based on three.js; S46. Update the rotation state of the electron through the renderEvent method, traverse all electrons and randomly rotate their angles; S47. Render the AtomModel model into the scene.

8. The three.js-based three-dimensional chemical molecular model display method according to claim 7, characterized in that: In the step S41, a helper with a coordinate axis mark is added to the three.js scene through THREE.AxisHelper to locate and move the position and direction of the chemical atom.

9. The three-dimensional chemical molecular model display method based on three.js according to claim 1, characterized in that: In step S5, an AtomInside class is defined to create an atomic internal model. The AtomInside class includes: (1) Constructor: used to construct an atomic internal model object based on molecular data. The constructor parameters of the atomic internal model include the number of electrons and the number of protons. (2) initAtomInside method: First, create the geometry and material of the nucleus, then create a THREE.Mesh object based on the configuration information of the molecule data and add it to the scene; then create the geometry and material of the proton, create a THREE.Mesh object to represent the proton, set its position, and add it to the scene; if the number of neutrons inside the atom is greater than 0, clone the proton object to create a neutron, set its position and material, and add it to the scene; (3) getTextCanvas method: used to create a text label for displaying the number of electrons and neutrons based on the molecular data configuration information and add it to the scene.

10. The three.js-based three-dimensional chemical molecular model display method according to claim 1, characterized in that: The method also defines a library for creating an interactive debugging panel, the library comprising: (1) DatGUIParams interface: defines the parameters that can be passed in when creating a DatGUI instance, including automatic placement, initial close, close button position, whether it can be hidden, and loading status; (2) Defines the DatGUI class, which is used to create and manage the debug panel, including adding controllers, adding color controllers, adding folders, and saving states; (3) Defines the DatGUIController class: used to manage a single controller, including managing the controller's DOM elements, associated objects, and properties.

Images