Sample here: http://jsfiddle.net/c3shonu7/1/
As demonstrated in the code a BufferGeometry object is created by cloning an IcosahedronBufferGeometry's vertices. The intention is to color the subdivided icosahedron lighter at the poles and darker at the equator i.e. the lightness value of the vertex color goes from 1 to 0 based on the vertice's z-coordinate.
color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
However, each face is ending up "randomly" colored, what am I missing?
If I understood your intention correctly, the only problem is that you are adding colours three times for each vertex:
for(var i = 0; i < vertices.length; i+= 1) {
if(i % 3 == 0) {
color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
}
colors.push(color.r,color.g,color.b);
}
Since the for loop is not iterating through vertices but through vertex coordinates, the colour should be pushed only when the if-statement is true. In short:
for(var i = 0; i < vertices.length; i+= 1) {
if(i % 3 == 0) {
color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
colors.push(color.r,color.g,color.b);
}
}
Did this fix your problem?
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments