Javascript 动态添加网格会导致控件延迟

我正在用Three.js制作一张3D地图

我正在从获取的256x256像素图像构建几何体和纹理，构建一个

THREE.Mesh

，完成后将其添加到场景中

但是，如果用户快速平移或缩放，则向地图添加平铺会导致

MapControls

明显滞后。这可以通过使用较小的平铺（例如128*128）来缓解，但我想找到一种更好的方法，因为我已经看到了使用Three.js的非常平滑的贴图示例。加载视图中的所有平铺后，控件将顺利工作

我有两个事件侦听器。当控件更改时，将触发一个：

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

并渲染地图：

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

另一个侦听移动结束，然后获取视图中的平铺：

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

fetchTilesIfNecessary

然后创建承诺，开始获取分幅。提取分幅时，将其添加到地图中，并调用此更新

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 = [];
}

---

有更好的办法吗？如何向场景动态添加网格并保持控件平稳运行？

缓解此问题的一种方法是通过预编译所有着色器。这意味着当你的应用程序启动时，你可以将所有的瓷砖添加到你的场景中，然后使用场景的相机调用一次

renderer.compile（）

this.mesh.onAfterRender=this.disposeAttributes

不建议这样做，因为它将在每次渲染调用时执行。如果要从JS端释放几何体数据，请使用

BufferAttribute（）

的

onUpdate（）

回调

geometry.getAttribute（'position'）.onUpload（disposeArlay）；
函数disposeArray（）{
this.array=null；
}

谢谢您的回答。我以正确的方式实现了这一点，或者释放了几何体数据。但是，我无法在开始时将所有的平铺添加到场景中，因为用户可以在较低的缩放级别上平移整个世界。这是一个使用Three.js:的地图示例，它工作非常顺利。有可能会导致滞后，但总的来说，它的性能比我的好，我不知道为什么会这样。如果您知道一些好的线程或其他资源，这将有助于进一步优化它，我将非常感谢。如果您的平铺使用纹理，您可能希望使用

ImageBitmapLoader

加载它们，因为

ImageBitmap

的使用减轻了初始纹理解码开销。以下示例显示如何使用加载程序：