Shulou(Shulou.com)06/01 Report--

This article shares with you the content of a sample analysis of 3D model loading testing in three.js. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Three.js can load processed 3D model data, as Cesium can load gltf models, three.js can also support, GIS development: Threejs loads gltf models, loading relatively small several is no problem, here a large number of models are loaded for testing.

Gltf is exported using blender, directly exported in a compressed format with a .glb suffix.

There are more than 500 models.

The total amount of exported .glb data is about 1GB.

Using nginx to publish model data

Cyclic use of THREE.GLTFLoader for model loading

All models are loaded

The effect of loading the model:

Test results of the model:

In the local test, the data transmission speed is relatively fast, and the loading is completed in less than 1 minute.

When loading, the scene moves a little bit stuttered, and after the model is loaded, the scene operation is more smooth.

The performance consumption is relatively large, and the memory of chrome has already taken up more of 4GB.

The reality of the model detail restoration is still OK.

Summary:

With three.js, it is easy to add some effects such as lighting and shadows of the scene

It is possible to make a small 3D scene.

The effect on each model is still controlled by API.

Computer performance is still required to be relatively high, and in terms of browsers, chrome is the best.

Duplicate objects, such as trees, streetlights and other widgets, load the model once, copy the object, and set the location, which is much more efficient

In the aspect of optimization, in order to increase the loading amount of the model, we can dynamically load and unload the model data according to the visual field, which should be further developed on the basis of this.

Model details and map optimization are also on the one hand, but this will reduce the display effect of the model.

Functional aspects, especially gis, still need to be developed on their own.

Thank you for reading! This is the end of the article on "sample Analysis of 3D Model loading Test in three.js". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.