时间戳

首页 > 解决方案 > 三、bufferGeometry的颜色和位置属性使用不同的顶点，很难比较

javascript - 三、bufferGeometry的颜色和位置属性使用不同的顶点，很难比较

问题描述

我有一个细节为 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 的系统的顶点吗？有没有一种数学方法可以正确地做到这一点？

标签： javascriptthree.jsmeshvertices

解决方案

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

vertex.fromBufferAttribute( position, index );

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

geometry.attributes.position.getY(i);

或者因为.getX(i)这些.getZ(i)使用了tris的顶点！

推荐阅读