Animating Mesh Vertices and Colors
Use mouse to Rotate.
Use mouse to Rotate.
The demo shows a sphere that can be animated in two 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 (when "Use Vertex Colors" is not checked). Or, colors can be assigned to the vertices. When the sphere is colored, each vertex has its own randomly assigned color. Colors are then interpolated to the interior of each triangle. You can see that the icosphere does not use an indexed geometry, because when several triangles meet at a vertex, that vertex had a different color in each triangle. This means that it's not actually the same vertex at all—each triangle gets its own set of three vertices that are not shared with any other triangle.
For fun, 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 when colors are turned off. Second, "Animate Vertices" changes the geometry 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 vertex can be animated. This is done for up to 20 different vertices simultaneously. Note again that vertices are not shared between triangles: When a vertex moves, only one triangle is affected. (You might occasionally see two or even three vertices in the same triangle being animated.)
If you look at the source code for the demo, you will notice that when the colors are modified, colorBuffer.needsUpdate is set to true. Here, colorBuffer is the THREE.BufferAttribute that holds the color data that is used when the object is rendered. Similarly, when the position of any vertex is changed, vertexBuffer.needsUpdate is set to true. And when the colors are turned on or off, 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.
