javascript - 动态添加网格会导致控件滞后

Question

我正在 Three.js 中制作 3D map 。
我正在从获取的 256x256 像素图像中构造几何和纹理，构造 THREE.Mesh完成后将其添加到场景中。
但是，向 map 添加图 block 会导致 MapControls如果用户快速平移或缩放，则明显滞后。这可以通过使用较小的图 block (例如 128*128)来缓解，但我想找到更好的方法，因为我已经看到了使用 Three.js 的非常平滑的 map 的示例。在 View 中的所有图 block 都加载后，控件可以正常工作。
我有 2 个事件监听器。一个在控件更改时触发:

this.controls.addEventListener('change', this.update);

并渲染 map :

update = () => {
    this.renderer.render(this.scene, this.camera);
};

另一个监听移动到结束，然后获取 View 中的图 block :

this.controls.addEventListener('end', this.fetchTilesIfNecessary);

fetchTilesIfNecessary然后创建 Promises，开始获取瓦片。获取瓦片后，它们将被添加到 map 中并 this.update叫做:

addTile(tile) {
    this.scene.add(tile.mesh);
    this.update();
}

也许我应该提一下，当瓷砖网格被渲染时我有一个回调:

this.mesh.onAfterRender = this.disposeAttributes;

这会清除导致大量内存使用的属性

disposeAttributes(renderer, scene, camera, geometry, material, group) {
    geometry.getAttribute('position').array = [];
    geometry.getAttribute('normal').array = [];
    geometry.getAttribute('uv').array = [];
}

有没有更好的办法？如何动态地将网格添加到场景中并保持控件平稳运行？

Answer 1

缓解此问题的一种方法是通过 WebGLRenderer.compile() 预编译所有着色器。 .这意味着当您的应用程序启动时，您将所有图 block 添加到场景中，然后调用 renderer.compile()一次用场景的相机。

this.mesh.onAfterRender = this.disposeAttributes;

不建议这样做，因为它将在每次渲染调用时执行。如果要在 JS 端释放几何数据，请使用 onUpdate() BufferAttribute()的回调.

geometry.getAttribute( 'position' ).onUpload( disposeArray );

function disposeArray() {

    this.array = null;

}