Animating Mesh Vertices and Colors
Colors:
Use mouse to Rotate.
Colors:
Use mouse to Rotate.
The demo shows a sphere that can be colored in four different ways. The sphere is an "icosphere" that is created by subdividing the faces of an icosahedron. In this model of a sphere, all of the faces are triangles of the same size and shape.
The sphere can be entirely white ("No Color"). It can use a different color for each face ("One Color Per Face"); in this mode, the color of each face is stored in the geometry, in the property face.color. It can use a different color for each vertex of each face ("Three Colors Per Face"); in this mode, the colors are stored in the property face.vertexColors, which is an array of three colors. Or it can use a color for each vertex ("One Color Per Vertex"); this also uses face.vertexColors, but the color of a given vertex is the same for each face in which it occurs.
The demo has two somewhat silly animations, which can run at the same time. First, "Animate Colors" causes each color on the sphere to change over time. This option is disabled for the "No Colors" mode. Second, "Animate Vertices" changes the shape of the object by moving some vertices. A vertex is chosen at random and is moved away from the surface of the sphere and then back; when it gets back to its starting point, the animation of that vertex stops, and another vertiex can be animated. This is done for up to 12 different vertices simultaneously. You should try different combinations of animation, color choice, and wireframe visibility!
If you look at the source code for the demo, you will notice that any time the colors are changed, both geometry.colorsNeedUpdate is set to true. When the position of any vertex is changed, geometry.verticesNeedUpdate is set to true. Furthermore, when the color mode is change, geometry.elementsNeedUpdate is also set to true. And when the material is modified, material.needsUpdate is set to true. These settings are necessary to force the renderer to recompute some data that it has cached. Without them, the changes would not have any effect on the appearance of the sphere.
