How to completely delete models and optimize performance in three.js scenarios

Delete external model

In the three.js scenario, to completely delete the external model, you need to perform the following steps:

Removing a model from the scene
You can use scene.remove(model)or scene.remove(model.children[0])to remove a model from the scene. If there are multiple models, you can use a loop to process them.
Remove all materials and textures
Models often contain materials and textures, and even if you remove them from the scene, they still exist in memory, so you need to remove them all. You can use the following code to remove a material and corresponding map:
```
material.dispose();
if (material.map) {
      
      
    material.map.dispose();
}
```
If the model has multiple materials and textures, it also needs to be processed using loops.
Freeing geometry and buffer properties
In WebGL, geometry and buffer properties are stored directly on the GPU, so you need to release them manually to free up memory. You can use the following code to release a geometry and corresponding buffer properties:
```
geometry.dispose();
geometry.attributes = null; // 这些属性包括position, normal, uv等等
```
If the model has multiple geometries and buffer properties, it also needs to be processed using a loop.
Manually breaking references
If you use custom code to create a model, you need to manually break all references to the model so that JavaScript's garbage collection mechanism can clear it from memory.
```
model.traverse((obj) => {
      
      
    if (!obj.isMesh) return;
    obj.geometry.dispose();
    obj.material.dispose();
});
model = null;
```
Setting modelto nullYes ensures that the variable is never used again.

After the above steps are completed, the external model will be completely deleted and will not occupy memory. If you find that it doesn't work, then keep checking your code. dog!

Optimization tips

In addition to completely removing external models, there are some methods that can help you optimize memory usage. Here are some optimization tips:

Merging Geometry
If you have a lot of geometry in your scene, consider merging them into one large geometry. This reduces the number of rendering calls and offloads the GPU, thereby improving performance and reducing memory overhead.
Compressed Textures
Textures are one of the most memory-intensive resources, so compressing them can significantly reduce memory usage. three.js has a built-in texture compression tool that can be used to generate compressed textures.
Using LOD (Level Of Detail) technology,
LOD technology can automatically switch geometry with different levels of detail based on distance, thereby displaying a simplified model at a distance and optimizing rendering performance. This can be achieved using THREE.LODthe classes that come with three.js.
Remove Invisible Objects
If a model or object is not visible, it has no need to exist in the scene. You can use visibleattributes or frustum culling technology to determine whether objects are visible and remove invisible objects in time to avoid memory waste.

SO, you can optimize memory usage and performance in a variety of ways, and avoid waste and unnecessary resource occupation as much as possible during the development process.

Precautions

Additionally, there are some common mistakes and caveats to be aware of:

Memory leaks
Since JavaScript is a garbage-collected language, memory leaks may occur if you accidentally save objects in global variables or forget to delete objects that are no longer needed. This causes the memory footprint to grow without limit, eventually causing the program to crash. Therefore, be sure to always pay attention to the life cycle of objects and promptly delete objects that are no longer needed.
Frequent creation and destruction of objects
Creating and destroying objects is an expensive operation, so frequent creation and destruction of objects should be avoided as much as possible. For example, creating objects in a loop can severely impact performance because memory space is reallocated each time through the loop. Instead, you can create a pool of objects before the loop to reuse objects.
Unnecessary recursion
If you write a recursive function, make sure it ends with the correct condition and does not end in an infinite loop. Recursion may keep creating new function calls until the browser's maximum call stack size is reached. This results in a stack overflow error.

In summary, the performance and reliability of your three.js application can be greatly improved by carefully planning your code structure, reducing resource waste, and avoiding common mistakes.

~~Three optimization is a road of no return~~