My game features hexagonal tiles with a fog of war overlay on top. To create these tiles, I utilize CylinderGeometry. The process involves creating a new CylinderGeometry above the hex tile to act as the fog of war. In an attempt to make the fog tile look less uniform, I decided to randomize its vertices slightly. However, this led to an unexpected issue where the original tile also became randomized. I'm puzzled by how this happened, as I even tried creating the fog tile first but still encountered the same problem.
Below is the code snippet:
class Tile extends THREE.Object3D
{
constructor ( radius, gridX, gridY, fogMaterial )
{
super();
// Code for creating tiles and fog of war
return this;
}
}
Could someone explain why this unexpected behavior is occurring? Is it possible that THREE.js is caching certain elements in the background?
Here is the JSFiddle
Edit: Upon further examination, I compared the vertex positions of the tile before and after the fog generation, and they appeared identical. I've heard that Geometry might be converted to BufferGeometry at some point—could this conversion be causing the issue?