Three.js--How does modeling software load external 3D models?

Table of contents

Introduction to 3D modeling software

Blender official document introduction

Blender software installation

Introduction to GLTF format

gltf different file formats


        Anyone who has read the three articles I explained before knows that I did not use some simple models that come with three.js when creating models, but introduced external models and loaded them on the page. In short: for simple You can use the geometry-related API of three.js to quickly realize the types of cubes and spheres, but complex models, such as a car, a house, and a warehouse, generally need to be realized through 3D modeling software.

Introduction to 3D modeling software

3D modeling software commonly used in 3D art, such as Blender (lightweight open source), 3damx, C4D, maya, etc. Special industry projects may involve industry software, such as machinery-related (SW, UG), architecture-related (Sketch Master, revit).

The division of labor between 3D modeling and programming is

3D art : use 3D modeling software to draw 3D models, export gltf and other common formats

Programmer : load and analyze the 3D model exported by the 3D software

For example, use Blender 3D modeling software to export the gltf format model, and then load the 3D model through threejs

The benefits of programmers learning 3D modeling : understanding 3D related concepts, wanting to compare codes, modeling software makes people feel more visual and easy to understand. The interaction between the modeling software and the three.js code can better cooperate with the art, and you can know how the modeling software exports the model.

What modeling software should beginners choose ? The blogger recommends everyone to use Blender software, which is easy to install, open source, free, and easy to operate. Next, I will briefly introduce the installation of Blender modeling software:

Blender official document introduction

First, enter its download official website: Blender official website , and then click Download on the homepage of the official website to download, as follows:

After entering the download page, select according to the system of your computer. My personal computer is window, and select the corresponding system. Here it is recommended to download the zip format, which is more convenient and quick to install and less prone to errors.

If the click does not respond, pull down to the location shown in the figure below and click to download again:

If you want to check some new functions after each version update, you can check  the latest changes in the version , here you can use translation software to check:

Click the demo files under download, you can prostitute the official past splash screen files and asset library files for free

Blender software installation

After downloading the blender software zip, you can proceed to the corresponding installation. Here it is recommended to install to the D drive, and then pay attention to the installation path without Chinese paths to avoid rendering errors. Unzip the compressed package and enter the file, then find the file as shown in the figure below and send it to the desktop shortcut:

Find the shortcut on the desktop and double-click to open it. After entering the main page of the software, select the language you want, such as Chinese

Then click on the blank space to make the current pop-up box disappear, then click the Edit option in the menu bar, select Preferences, and uncheck the new data to avoid file errors.

Then select the system, check all graphics cards and CPUs:

Then undo the setting and suggest setting it to 100:

Ok, the basic configuration of blender's installation and basic settings is complete, and then you can carry out 3D modeling at any time.

Introduction to GLTF format

The GLTF format is a 3D model format released in 2015. With the further development of the Internet of Things, WebGL, and 5G, more and more Internet projects will introduce 3D elements on the Web side. You can understand the 3D model in GLTF format as jpg, . images in png format. The current website, pictures are basically standard configurations. For future websites, if a scene needs to be displayed, it is normal to use 3D to replace the picture expression.

There are many formats for pictures, and the same is true for 3D models. There are common formats for pictures in Web development, and the same is true for Web3D development. You will definitely choose a common format that everyone is familiar with. With the development of time, GLTF will inevitably Known as an extremely important standard format. Not only three.,js, but also other WebGL 3D engines such as cesium and babylonjs have good support for the gltf format.

The Khronos Group organization released GLTF1.0 in 2015, and released GLTF2.0 in 2017. For more introduction and information about gltf, you can view github: https://github.com/KhronosGroup/glTF .

gltf contains content : Compared with obj, stl and other formats, the .gltf format can contain more model information. The .gltf format file can contain almost all 3D model related information data, such as model hierarchy, PBR material, texture map, bone map, deformation animation, etc.

gltf format information : If you have a certain front-end foundation, then you must be familiar with JSON. GLTF files represent model information through JSON key-value pairs. For example, meshes represent grid model information, and materials represent material information.

.bin file : Some gltf files are associated with one or more .bin files, and the .bin files store information such as the vertex data of the model in binary form. The information in the .bin file is actually corresponding to the buffers attribute in the gltf file. The model data in buffers.bin can be stored in the .gltf file or a separate binary .bin file.

Binary .glb : The gltf format file does not necessarily end with the extension .gltf, and .glb is a binary file in gltf format. For example, you can synthesize all the .gltf model and texture information into a .glb file. The .glb file is smaller than the .gltf file, and the network transmission is naturally faster.

gltf different file formats

3D modeling software such as Blender can export gltf models in different forms according to the settings, such as exporting a .gltf file separately, such as exporting a .glb file separately, for example, the export format is: .gltf + .bin + texture multiple files.

Model files in .gltf format, with different organizational forms. Single .gltf file, single .glb file, .gltf + .bin + texture files.

Note : When data such as textures is a single file, be careful not to change the directory of the child file relative to the parent file gltf at will, so as not to find resources. This is very important, remember! ! !

There is actually no difference in loading codes for these different forms of gltf models. For example, after we draw a model through 3D modeling software, we can export it through the modeling software, as follows:

For example, after I choose to export the gltf model here, I can choose the format to export by myself:

Ok, the download of 3D modeling software and the brief introduction of how to export the gltf model are over here. Later bloggers may also explain a little about 3D modeling Blender. Follow bloggers so that the learning path will no longer be confused !

Guess you like

Origin blog.csdn.net/qq_53123067/article/details/130877236