I've developed a custom component in a-frame that generates a unique geometry. I'm using the tick function to animate the update of the geometry's vertices successfully. However, the shadow on the geometry doesn't seem to update accordingly.
In the example below, I switch between two states for a flat shape - folded and unfolded. When transitioning from folded to unfolded, the shadows remain as if it's still folded.
Check out the HTML code below, specifically look at <a-fold> which starts in the folded state (you can change it to 'unfolded' by modifying that attribute).
// Insert HTML code here
and the JavaScript code as follows:
// Insert JavaScript code here
Despite trying to set this.material.needsUpdate = true, this.mesh.castShadow = true, and this.mesh.receiveShadow = true within the component, the shadow issue persists.
Interestingly, when I animate the entire entity (e.g., a rotation), I notice the material reacting to light dynamically. However, this behavior is not observed when changing the shape by updating the vertices.
Please refer to the linked images below to better understand the problem:
https://i.sstatic.net/XRh0B.png
https://i.sstatic.net/JcuKz.png
The second image clearly shows that even though the plane appears flat, its shadows indicate a fold. This inconsistency also occurs in reverse (if starting unfolded, the correct shadow persists when folding).
Here is a link to a js fiddle for further reference: JS Fiddle Link
If you require additional information, please feel free to ask. Your assistance is greatly appreciated.