Web-based three-dimensional scene editor

Abstract

The invention discloses a Web-based three-dimensional scene editor, which belongs to the technical field of three-dimensional scene editing and internet, and realizes rendering and editing of a three-dimensional scene by combining a Web development technology with a Three.js three-dimensional rendering library. The three-dimensional scene editor comprises an editing interface, a three-dimensional scene storage and import module, a menu module, a preview window module, a scene hierarchy module, an attribute module, a particle effect module, a command module, a shortcut key module and the like. The three-dimensional scene editor can be seamlessly operated on equipment supporting a Web page, any plug-in or special software does not need to be additionally installed, the functions are comprehensive and flexible, and the working efficiency is improved; a brand-new creation platform is developed for a three-dimensional content creator, and the use scene and the audience range are greatly widened.

Description

Technical Field

[0001] The present invention relates to the field of three-dimensional scene editing and Internet technology, and more particularly to a three-dimensional scene editor based on Web. Background Art

[0002] With the development of Internet technology, 3D scenes are increasingly used in web pages, such as online games, virtual reality, product displays, etc. However, existing 3D scene editors usually require the installation of special software, which has high technical requirements for users and is not easy to use across platforms. Existing technical problems include:

[0003] Platform restrictions: Current 3D scene editors require specific software or plug-ins, which limits users' cross-platform use. For example, some editors can only run on specific operating systems, which makes it impossible for users to continue using them when changing devices.

[0004] Few functions: Current 3D scene editors have relatively few functions; for example, during the editing process, many editors cannot provide real-time preview effects, which requires users to wait for rendering to complete before viewing the effects after editing, greatly reducing work efficiency. Summary of the invention

[0005] In view of this, the present invention provides a three-dimensional scene editor based on Web development technology, aimed at the needs and shortcomings of current technological development. The editor can run seamlessly on devices that support Web pages without the need to install any additional plug-ins or special software, and has comprehensive and flexible functions; it is easy to solve the technical problems described in the background technology.

[0006] In order to achieve the above object, the present invention adopts the following technical solution:

[0007] In a first aspect, an embodiment of the present invention provides a Web-based 3D scene editor, which uses Web development technology combined with a Three.js 3D rendering library to achieve rendering and editing of 3D scenes. The 3D scene editor includes: an editing interface, a 3D scene saving and importing module, a menu module, a preview window module, a scene hierarchy module, a property module, a particle special effect module, a command module, and a shortcut key module; wherein:

[0008] Editing interface, providing an interface for editing the three-dimensional scene;

[0009] A 3D scene saving and importing module is used to export the created 3D scene to a local file in a preset format, or to import a 3D scene in a preset format;

[0010] The menu module includes tabs for file, add and special functions. The file tab includes operations for importing and exporting 3D scenes, models and content packages. The add tab allows you to add basic Three.js objects. The special function tab contains execution scripts for specific functions.

[0011] The preview window module uses Three.js to complete the real-time preview, which allows users to edit scene objects through relevant operations in the preview window;

[0012] The scene hierarchy module is based on the tree-like logical structure of scene objects in Three.js, and uses the outline directory display method to display the scene structure;

[0013] The attribute module is used to display the parameter attributes of the currently selected object;

[0014] Particle effects module, which implements particle effects based on the sprite material in Three.js, and is used to add a particle system to the property bar of a specified object;

[0015] The command module is used to implement undo and redo operations. Each time an operation is performed, a combined command of executing the operation and undoing the operation is input into the command stack.

[0016] In a preferred embodiment, the three-dimensional scene editor further includes: a shortcut key module, which binds different keys to different functions by monitoring the physical keys.

[0017] In a preferred embodiment, the editing interface includes: a menu bar set at the top of the interface, a scene hierarchy bar set on the left side of the interface, a property bar set on the right side of the interface, a scene configuration bar set on the right side of the interface, and a preview window set in the middle of the interface.

[0018] In a preferred embodiment, the three-dimensional scene saving and importing module exports the created three-dimensional scene as a local file in .y3d format, or imports a three-dimensional scene in .y3d format; it also provides an online caching function, executing a timed loop to automatically cache the current scene to the browser IndexDB during the editing of the three-dimensional scene.

[0019] In a preferred embodiment, the execution script of the specific function includes: detecting the size of the texture, sorting the objects by name, and taking a screenshot of the current preview window.

[0020] In a preferred embodiment, the preview window module provides a variety of auxiliary tools, including: XZ axis plane grid, object controller, coordinate system indicator, statistical data tool and skeleton auxiliary line.

[0021] In a preferred embodiment, the scene hierarchy module is further used to search for nodes of object names or material names of specified keywords.

[0022] In a preferred embodiment, the parameter attributes displayed by the attribute module include: position, rotation, scaling, visibility, shadow, rendering order and custom data.

[0023] In a preferred embodiment, the particle system added by the particle special effect module has multiple properties for configuration, including: emitter properties, particle initial state, and particle change characteristics during the life cycle.

[0024] In a preferred embodiment, the system logic architecture of the 3D scene editor includes five core parts: the master controller, the scene configuration, the cache system, the command system and the rendering system; these five core parts realize the overall function of the 3D scene editor through interconnection and interaction.

[0025] It can be seen from the above technical solutions that, compared with the prior art, the present invention has at least the following technical advantages:

[0026] 1. Cross-platform compatibility: Thanks to the advanced Web technology architecture, the editor can run seamlessly on any device that supports Web standards without the need to install any additional plug-ins or dedicated software, greatly broadening the scope of use scenarios and audiences.

[0027] 2. Versatility and efficiency: The built-in real-time preview function allows users to instantly observe the intuitive effect of each modification during the editing process. This feature not only accelerates creative iterations, but also greatly improves work efficiency, ensuring the rapid realization and accurate expression of creativity.

[0028] 3. Ease of use: The editor is equipped with an intuitive and easy-to-understand graphical operation interface. With a simple and clear layout and operation process, it significantly lowers the technical operation threshold. Even non-professional users can easily get started and enjoy the fun of creation.

[0029] Other features and advantages of the present invention will be described in the following description, and partly become apparent from the description, or understood by practicing the present invention. The purpose and other advantages of the present invention can be realized and obtained by the structures particularly pointed out in the written description and the accompanying drawings.

[0030] The technical solution of the present invention is further described in detail below through the accompanying drawings and embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0032] The accompanying drawings are used to provide further understanding of the present invention and constitute a part of the specification. They are used to explain the present invention together with the embodiments of the present invention and do not constitute a limitation of the present invention.

[0033] Figure 1 A schematic diagram of the functional architecture of a Web-based 3D scene editor provided by an embodiment of the present invention.

[0034] Figure 2 A schematic diagram of an editing interface provided by an embodiment of the present invention.

[0035] Figure 3 A schematic diagram of adding a tab to optionally create an object provided in an embodiment of the present invention.

[0036] Figure 4 The scene hierarchy bar provided in the embodiment of the present invention can search for node schematic diagrams of object names or material names of specified keywords.

[0037] Figure 5 A schematic diagram of adjusting properties provided by an embodiment of the present invention.

[0038] Figure 6 A schematic diagram of a simple physical effect simulation of a particle system provided by an embodiment of the present invention.

[0039] Figure 7 A schematic diagram of optional configurations of particle initial states and process changes provided for an embodiment of the present invention.

[0040] Figure 8 A schematic diagram of the initial shortcut key configuration provided by an embodiment of the present invention.

[0041] Fig. 9 A schematic diagram of the system logic architecture of a Web-based 3D scene editor provided by an embodiment of the present invention.

[0042] Fig.10 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0043] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Generally, the components of the embodiments of the present invention described and shown in the drawings here can be arranged and designed in various different configurations.

[0044] In the description of the present invention, it should be noted that: in some processes described in the specification and drawings of this application, multiple operations appearing in a specific order are included, but it should be clearly understood that these operations may not be performed in the order in which they appear in this document or may be performed in parallel. In addition, various serial numbers are only used for descriptive purposes and cannot be understood as indicating or implying relative importance.

[0045] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0046] See also Figure 1 As shown, the present invention provides a Web-based 3D scene editor, which uses Web development technologies, such as Vue3, JavaScript, Less, and HTML5, and combines the Three.js 3D rendering library to achieve rendering and editing of 3D scenes. In this embodiment, the development environment is built based on Node.js and Vite development tools; the UI interface is developed based on Vue3, HTML5, and Less; and the rendering engine uses the open source Three.js engine for 3D rendering. The main functional modules of the 3D scene editor of the present invention are introduced in detail below:

[0047] The main functional modules of the 3D scene editor include:

[0048] 1. Editing interface: Figure 2 As shown in the figure, the editing interface is simple and clear, including the top menu bar, the scene level bar on the left, the property bar on the right, the scene configuration bar on the right and the preview window in the middle. Users can easily edit the 3D scene.

[0049] 2. Saving and importing 3D scenes: Allow users to export the created 3D scenes to local files in .y3d format (.y3d format is zip compression of json format data), or import 3D scenes in .y3d format, so that users can save and share the current scene. At the same time, it provides online caching function. When users are editing 3D scenes, the editor will execute a timed loop to automatically cache the current scene to the browser IndexDB. Users can decide whether to enable this function and set the interval time.

[0050] 3. Menu bar: Contains the File, Add and Special Function tabs. The File tab contains functions such as importing and exporting 3D scenes, importing and exporting models, and exporting content packages (scene resources in zip format). Figure 3 In the drop-down list shown, users can manually add some Three.js basic objects by adding tabs, such as cube, cylinder, tetrahedron, ring, group, ambient light and parallel light, etc. Special functions include execution scripts for specific functions, such as texture size detection, object sorting by name, current preview window screenshot, etc., as well as reserved future expansion functions.

[0051] 4. Preview window: Three.js is used to implement real-time preview function, so users can instantly view the editing effect during the editing process. Users can edit scene objects by dragging, scaling, rotating, etc. in the preview window. The preview window also provides a wealth of auxiliary tools, including XZ axis plane grid (for measuring size, determining the ground, etc.), object controller (convenient to drag, scale, rotate, etc. with the mouse), coordinate system indicator (synchronize the current camera position, and adjust the camera position at the same time when clicking the coordinate axis point), statistical data (including statistical information such as objects, triangles, vertices, frame rates, etc.), and skeleton auxiliary lines (displaying the connection between the model's skeleton nodes).

[0052] 5. Scene hierarchy bar: Based on the tree-like logical structure of scene objects in Three.js, the scene hierarchy bar will display the scene structure in a similar way to an outline directory. Users can drag any node except the root node to any level. At the same time, the scene hierarchy bar can search for nodes with object names or material names of specified keywords, such as Figure 4 Shown in the left sidebar.

[0053] 6. Property bar: Displays the parameter properties of the currently selected object, including position, rotation, scale, visibility, shadow, rendering order and custom data. Users can adjust the above properties according to their needs, such as Figure 5 shown in the right sidebar.

[0054] 7. Particle effects: Based on the particle effects system implemented by the sprite material in Three.js, you can add a particle system in the property column of the specified object. Figure 6 and Figure 7 As shown, the particle system has multiple properties to configure, which can be divided into three categories: emitter properties (including emission quantity, interval, limit, etc.), particle initial state (including initial vector velocity, material, position, etc.), particle change characteristics during the life cycle (including color, size, transparency, etc.). In addition, this particle system has also developed a simple physical effect simulation, that is, the particle's own mass can be set in the initial state, and the force can be set in the change characteristics, so as to simulate some physical effects under ideal conditions, such as: gravity falling, steam rising, acceleration, etc.

[0055] 8. Command system: There is a complete command system inside the editor to implement the undo and redo functions. Every time the user performs an operation (such as setting the X value attribute of the object position), a combination of execution and undo operations will be entered into the command stack.

[0056] 9. Shortcut key system: By monitoring the physical keys in the document, bind different keys to different functions, such as ctrl+s for manual cache scenes, etc. For specific settings, see Figure 8 As shown. Users can customize any shortcut key binding.

[0057] In one embodiment, see Fig. 9 As shown, the system logic architecture of the present invention is mainly composed of five core parts: the main controller, the scene configuration, the cache system, the command system and the rendering system. These parts are connected and acted on each other to jointly realize the overall function of the system. The system logic architecture is a highly integrated and collaborative system. Through the close cooperation of various parts, efficient processing and visual presentation of the scene are achieved. Among them:

[0058] ① Master controller: As the core control unit of the system, the master controller is responsible for coordinating the work of each part to ensure that each part can work together smoothly. The master controller is responsible for receiving instructions from users or other external sources, and scheduling and assigning tasks to each subsystem based on these instructions.

[0059] ② Scene configuration: The scene configuration part is responsible for setting the scene content, including object properties, ambient light settings, background settings, etc. Scene configuration is an important part of system initialization and operation, providing necessary scene information for other parts.

[0060] ③ Cache system: The cache system is used to store and manage temporary data in the system. Through caching, the system can reduce the number of accesses to external storage, thereby improving the speed and efficiency of data processing. The cache system may contain multiple types of data, such as scene data, command data, interface configuration, etc.

[0061] ④ Command system: The command system is responsible for receiving and processing instructions from the master controller and converting these instructions into specific operations or actions. It contains various types of commands, such as rotation, scaling, movement, etc., which are used to perform various operations on objects in the scene.

[0062] ⑤ Rendering system: The rendering system is the output part of the system, responsible for presenting the processed data to the user in a visual form. According to the scene configuration and the output of the command system, the final image or animation effect is generated. The performance and quality of the rendering system directly affect the user's visual experience.

[0063] From the description of the above embodiments, those skilled in the art can know that the present invention innovatively introduces a 3D scene editor based on the Web platform, which can run seamlessly on any device that supports the Web standard without installing any additional plug-ins or special software, greatly broadening the scope of use scenarios and audiences, and its functions are comprehensive and powerful. The specific advantages include but are not limited to the following aspects:

[0064] 1. Intuitive visual editing interface: Users can easily realize multi-angle viewing and editing of 3D scenes through convenient dragging, flexible zooming and precise rotation, which greatly improves the intuitiveness and convenience of operation.

[0065] 2. Rich built-in object creation capabilities: The editor has built-in a variety of practical object types, including but not limited to solid meshes, composite objects, light sources, etc., to meet the diverse needs of users when building complex 3D scenes.

[0066] 3. Extensive model import compatibility: Supports importing 3D model files in multiple mainstream formats (including .glb, .fbx, .obj), providing users with a richer source of materials and promoting the free play of creativity.

[0067] 4. Real-time editing preview function: The editor has a built-in real-time preview mechanism. After editing any object, users can immediately observe the modified effect, which significantly improves work efficiency and creation accuracy.

[0068] 5. Flexible creation of special effect objects: In addition to basic objects, the present invention further supports the creation of advanced effects such as particle special effects and model animations. The introduction of these advanced special effect objects adds rich dynamic beauty and strong visual impact to the design of three-dimensional scenes, allowing creators to build a more vivid and realistic virtual world.

[0069] 6. Customized scene export and import functions: Users can export or import carefully created 3D scenes in a unique .y3d format, which is convenient for sharing and communication of works. At the same time, the editor is also equipped with an automatic caching function, which effectively ensures the continuity of the creation process and data security.

[0070] In summary, the Web-based 3D scene editor provided by the present invention, with its comprehensive functions, high flexibility and excellent user experience, opens up a new creation platform for 3D content creators, improving work efficiency, convenience and user experience.

[0071] Further, refer to Fig.10 As shown, an embodiment of the present invention further provides an electronic device, which may include a processor 10, a memory 11, a communication bus 12 and a communication interface 13, and may also include a computer program stored in the memory 11 and executable on the processor 10, and the processor executes the computer program to implement the operation of the above-mentioned Web-based three-dimensional scene editor.

[0072] The processor 10 may be composed of an integrated circuit in some embodiments, for example, a single packaged integrated circuit, or a plurality of packaged integrated circuits with the same or different functions, including one or more central processing units (CPUs), microprocessors, digital processing chips, graphics processors, and combinations of various control chips. The processor 10 is the control core of the electronic device, and uses various interfaces and lines to connect various components of the entire electronic device, and executes various functions of the electronic device and processes data by running or executing programs or modules stored in the memory 11, and calling data stored in the memory 11.

[0073] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as computer program products or electronic devices. Therefore, the present invention may take the form of a complete software embodiment, or a combination of software and hardware embodiments. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0074] It should be noted that the word "comprising" does not exclude the presence of components or steps not listed in the claims. The word "a" or "an" preceding a component does not exclude the presence of a plurality of such components. The invention can be implemented by means of hardware comprising several distinct components, and by means of a suitably programmed computer.

[0075] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0076] The above description of the disclosed embodiments enables one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A web-based 3D scene editor, characterized in that: The 3D scene editor uses Web development technology combined with the Three.js 3D rendering library to achieve 3D scene rendering and editing. The 3D scene editor includes: Editing interface, providing an interface for editing the three-dimensional scene; A 3D scene saving and importing module is used to export the created 3D scene to a local file in a preset format, or to import a 3D scene in a preset format; The menu module includes tabs for file, add and special functions. The file tab includes operations for importing and exporting 3D scenes, models and content packages. The add tab allows you to add basic Three.js objects. The special function tab contains execution scripts for specific functions. The preview window module uses Three.js to complete the real-time preview, which allows users to edit scene objects through relevant operations in the preview window; The scene hierarchy module is based on the tree-like logical structure of scene objects in Three.js, and uses the outline directory display method to display the scene structure; The attribute module is used to display the parameter attributes of the currently selected object; Particle effects module, which implements particle effects based on the sprite material in Three.js, and is used to add a particle system to the property bar of a specified object; The command module is used to implement undo and redo operations. Each time an operation is performed, a combined command of executing the operation and undoing the operation is input into the command stack.

2. A Web-based 3D scene editor according to claim 1, characterized in that: The three-dimensional scene editor also includes: a shortcut key module, which binds different keys to different functions by monitoring physical keys.

3. A Web-based 3D scene editor according to claim 1, characterized in that: The editing interface includes: a menu bar set at the top of the interface, a scene level bar set on the left side of the interface, a property bar set on the right side of the interface, a scene configuration bar set on the right side of the interface, and a preview window set in the middle of the interface.

4. A Web-based 3D scene editor according to claim 1, characterized in that: The 3D scene saving and importing module exports the created 3D scene as a local file in .y3d format, or imports a 3D scene in .y3d format; it also provides an online caching function, and executes a timing loop to automatically cache the current scene to the browser IndexDB during the editing of the 3D scene.

5. The Web-based 3D scene editor according to claim 1, characterized in that: The execution script of the specific function includes: texture size detection, object sorting by name and current preview window screenshot.

6. A Web-based 3D scene editor according to claim 1, characterized in that: The preview window module provides a variety of auxiliary tools, including: XZ axis plane grid, object controller, coordinate system indicator, statistical data tools and skeleton auxiliary lines.

7. The Web-based 3D scene editor according to claim 1, characterized in that: The scene hierarchy module is further used to search for nodes with object names or material names of specified keywords.

8. The web-based 3D scene editor according to claim 1, characterized in that: The parameter attributes displayed by the attribute module include: position, rotation, scale, visibility, shadow, rendering order and custom data.

9. The web-based 3D scene editor according to claim 1, characterized in that: The particle system added by the particle special effects module has multiple properties for configuration, including: emitter properties, particle initial state, and particle change characteristics during the life cycle.

10. The web-based 3D scene editor according to claim 1, characterized in that: The system logic architecture of the 3D scene editor includes five core parts: the main controller, scene configuration, cache system, command system and rendering system; these five core parts realize the overall function of the 3D scene editor through mutual connection and interaction.

Images