THREE.js bufferGeometry的颜色和位置属性使用不同的顶点，很难比较

Question

我的飞机的细节是400乘400。 在定义所有顶点的y位置时，我这样做。

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 );
        }
    }

复杂性代表飞机的细节。

正如您所看到的......我使用geometry.attributes.position来访问顶点，但重要的是要注意这将存储所有＆＃34; sqaure＆＃34;坐标

但是当谈到颜色属性时......它实际上使用构成飞机的tris的每个顶点的点（并且期望一个数组）...

我正在做的是制作一个颜色数组（每个顶点代表rgb 3个元素）然后尝试将其作为属性添加到几何体中，我试图使不同高度的顶点成为不同的颜色。例如

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);
}

在代码中带注释＆＃34;注意＆＃34;我不知道我在这里做的是从该方形系统到基于颜色属性tri的顶点系统的索引。

有什么想法吗？我应该尝试访问基于tri的系统的顶点吗？有正确的数学方法吗？

Answer 1

简单的解决方案是不使用：

vertex.fromBufferAttribute( position, index );

因为它使用了我在我的问题中讨论的方形系统，而是使用：

geometry.attributes.position.getY(i);

或.getX(i)或.getZ(i)因为它们使用了tris的顶点！