Search code examples
javascriptthree.jsmeshvertices

THREE.js Color and position attributes of bufferGeometry use different vertices, and are hard to compare

I have a plane with a detail of 400 by 400. When defining the y positions of all of the vertices, I do this.

var position = floorGeometry.attributes.position;    

for ( var i = 0; i <= complexity + 1; i ++ ) {
        for (var i2 = 0; i2 <= complexity; i2 ++) {
        vertex.fromBufferAttribute( position, i * complexity + i2);
        var x = vertex.x;
        var y = vertex.z;
        vertex.y = noise(x,y)
        position.setXYZ(i * complexity + i2, vertex.x, vertex.y, vertex.z );
        }
    }

Complexity represents the detail of the plane.

As you can see... I use geometry.attributes.position to access the vertices, but it is important to note that this stores all of the "sqaure" coordinates

enter image description here

But when it comes to the color attribute... it actually uses the points (and expects an array) of each and every vertex of the tris that make up the plane in a specific order...

enter image description here

What I am doing is making an array of colors (3 elements per vertex representing rgb) and then trying to add it as an attribute to the geometry, and I am trying to make vertices of different heights different colors. For example

count = floorGeometry.attributes.position.count;
var colors = [];

for ( var i = 0; i < count; i ++ ) {
    vertex.fromBufferAttribute( position, Math.floor(i)); //<---- NOTE
    if (vertex.y > 500) {
        colors.push(1,0,0);
    }
    else colors.push(0,1,0);
}

At the point in the code with the comment "NOTE" I dont know what i am doing here in terms of turing an index from that square system to the color attributes tri based vertex system.

Any ideas? Should I try to access the vertices of the tri based system instead? Is there a mathematical way to do this correctly?

Solution

  • The simple solution is to not use:

    vertex.fromBufferAttribute( position, index );

    because that uses the square system I discussed in my question, instead use:

    geometry.attributes.position.getY(i);

    or .getX(i) or .getZ(i) because these use the vertices of the tris!