Animating Mesh Vertices and Colors
Use mouse to Rotate.
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, the method geometry.colorsNeedUpdate() is called. When the position of any vertex is changed, geometry.verticesNeedUpdate() is called. When the material is modified, material.needsUpdate() is called. These calls 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.