THREE.js bufferGeometry的color和position属性使用不同的顶点，很难比较

Question

我有一架细节为 400 x 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 访问顶点，但重要的是要注意这存储了所有 "sqaure" 坐标

但是当涉及到颜色属性时......它实际上使用了以特定顺序构成平面的三角形的每个顶点的点（并期望一个数组）......

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

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

在代码中带有注释 "NOTE" 的地方，我不知道我在这里做了什么，将索引从那个正方形系统转换为基于颜色属性 tri 的顶点系统。

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

Answer 1

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

vertex.fromBufferAttribute( position, index );

因为它使用了我在问题中讨论的平方系统，所以使用：

geometry.attributes.position.getY(i);

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

THREE.js bufferGeometry的color和position属性使用不同的顶点，很难比较

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

javascript

three.js

mesh

vertices