问Three.js -什么是PlaneBufferGeometry

EN

PlaneBufferGeometry是PlaneGeometry的低内存替代品。对象本身在很多方面都不同。例如，PlaneBufferGeometry中的折点位于PlaneBufferGeometry.attributes.position中，而不是PlaneGeometry.vertices中

您可以在浏览器控制台中快速查看，以找出更多差异，但据我所知，由于顶点通常以统一的距离(X和Y)分布，因此只需给出高度(Z)来定位顶点。

主要区别在于Geometry和BufferGeometry之间。

几何体是一种用户友好的、面向对象的数据结构，而BufferGeometry是一种数据结构，它更直接地映射到数据在着色器程序中的使用方式。BufferGeometry速度更快，需要的内存更少，但几何体在某些方面更灵活，某些操作可以更轻松地完成。

我几乎没有使用几何学的经验，因为我发现BufferGeometry在大多数情况下都能完成这项工作。了解和使用着色器使用的实际数据结构非常有用。

在PlaneBufferGeometry的情况下，您可以像这样访问顶点位置：

let pos = geometry.getAttribute("position");
let pa = pos.array;

然后像这样设置z值：

var hVerts = geometry.heightSegments + 1;
var wVerts = geometry.widthSegments + 1;
for (let j = 0; j < hVerts; j++) {
    for (let i = 0; i < wVerts; i++) {
                            //+0 is x, +1 is y.
        pa[3*(j*wVerts+i)+2] = Math.random();
    }
}
pos.needsUpdate = true;
geometry.computeVertexNormals();

随机性只是一个例子。你也可以(另一个例子)如果在内部循环中使用let x = pa[3*(j*wVerts+i)];和let y = pa[3*(j*wVerts+i)+1];，则绘制x，y的函数。在PlaneBufferGeometry的情况下，为了获得较小的性能优势，可以在外部循环中使用let y = (0.5-j/(hVerts-1))*geometry.height。

如果您的材质使用法线，并且您尚未通过解析方式计算出更精确的法线，则建议使用geometry.computeVertexNormals();。如果不提供或计算法线，材质将使用默认的平面法线，这些法线都直接指向原始平面。

请注意，沿某一维度的顶点数比沿同一维度的线段数多一个。

还要注意(与直觉相反)y值相对于j索引反转：vertices.push( x, - y, 0 ); (source)