I'm currently working on creating a 3D map using Three.js.
My process involves building the geometry and texture with images of size 256x256 pixels, then constructing a THREE.Mesh to add to the scene upon completion.
However, I've noticed that adding tiles to the map causes noticeable lag in the MapControls when users are panning or zooming quickly. While using smaller tiles like 128x128 can improve performance, I'd like to explore other solutions as I've seen examples of extremely smooth maps created with Three.js. The controls operate smoothly once all visible tiles have loaded.
I have set up two event listeners: one that triggers when the controls change:
this.controls.addEventListener('change', this.update);
This listener renders the map:
update = () => {
this.renderer.render(this.scene, this.camera);
};
The second listener waits for the movement to end before fetching the necessary tiles:
this.controls.addEventListener('end', this.fetchTilesIfNecessary);
fetchTilesIfNecessary then initiates Promises to fetch the required tiles. Once fetched, they are added to the map, and this.update is called:
addTile(tile) {
this.scene.add(tile.mesh);
this.update();
}
It's worth mentioning that I have a callback for when the tile mesh finishes rendering:
this.mesh.onAfterRender = this.disposeAttributes;
This callback function clears attributes that consume a significant amount of memory:
disposeAttributes(renderer, scene, camera, geometry, material, group) {
geometry.getAttribute('position').array = [];
geometry.getAttribute('normal').array = [];
geometry.getAttribute('uv').array = [];
}
Is there a more efficient approach? How can I dynamically add meshes to the scene while ensuring smooth operation of the controls?