Question

我正在Three.js中制作3D地图。

我正在从获取的256x256像素图像中构造几何和纹理，构造THREE.Mesh并将其添加到场景中。

但是，如果用户正在快速平移或缩放，则在地图上添加图块会导致MapControls明显滞后。可以使用较小的图块（例如128 * 128）来缓解这种情况，但是我想找到一种更好的方法，因为我已经看到了使用Three.js绘制非常平滑的地图的示例。加载所有视图中的图块后，控件将正常工作。

我有2个事件侦听器。控件更改时触发一个触发器：

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

并渲染地图：

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

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

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

fetchTilesIfNecessary然后创建Promises，并开始获取图块。提取图块后，它们会添加到地图中，并且称为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()预编译所有着色器。意味着当您的应用启动时，您将所有图块添加到场景中，然后使用场景的相机调用renderer.compile()。

this.mesh.onAfterRender = this.disposeAttributes;

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

BufferAttribute()

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

1 个答案: