Three.js - 什么是 PlaneBufferGeometry答案

【问题标题】：Three.js - What is PlaneBufferGeometryThree.js - 什么是 PlaneBufferGeometry
【发布时间】：2015-01-27 16:41:25
【问题描述】：

PlaneBufferGeometry 到底是什么，它与 PlaneGeometry 有何不同？ (r69)

【问题讨论】：

标签： javascript three.js

【解决方案1】：

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

您可以在浏览器控制台中快速查看更多差异，但据我了解，因为顶点之间的间距通常相同（X 和 Y），只有需要给出高度（Z）来定位顶点。

【讨论】：

即使 x,y 坐标已经用 PlaneGeometry 或 PlaneBufferGeometry 给出，它们仍然是每个顶点数据表示的一部分，并且仍然可以修改。

【解决方案2】：

主要区别在于Geometry 和BufferGeometry。

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

我对几何的经验很少，因为我发现 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)

【讨论】：

是widthSegments + 1 中的+1 需要吗？这会跳过第一行，不是吗？
假设你的意思是这一行： pa[3*(j*(geometry.widthSegments+1)+i)+2] = Math.random();当 j 为 0 时，将迭代第一行。
好用又好用！也许，最好添加为什么我用于循环和计算的 +1 逻辑。要产生 N 个段，您需要 N+1 个顶点。所以实际的顶点数总是比段数多 1。