三.js - 什么是平面缓冲区几何

Three.js - What is PlaneBufferGeometry

本文关键字：缓冲区 平面 js 什么      更新时间：2023-09-26

PlaneBufferGeometry到底是什么，它与PlaneGeometry有什么不同？（R69）

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

您可以在浏览器控制台中快速查看以找出更多差异，但据我了解，由于顶点通常间隔在均匀的距离（X和Y）上，因此只需要给出高度（Z）来定位顶点。

主要区别在于 Geometry 和 BufferGeometry。

几何体是一种"用户友好"的面向对象的数据结构，而 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();

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

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

请注意，沿维度的

顶点数比沿同一维度的线段数多 1。

另请注意，（违反直觉）y 值相对于 j 指数翻转：vertices.push( x, - y, 0 );（来源）

相关文章：