three.js - 访问 BufferGeometry 中的面

Question

geometry.faces 仅可用于新的 THREE.BoxGeometry。然后我尝试使用 THREE.BoxBufferGeometry 我不能改变面孔的颜色。

不工作:

  var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
  for ( var i = 0; i < geometry.faces.length; i ++ ) {
    geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
  }

在职的:

  var geometry = new THREE.BoxGeometry( 100, 100, 100 );
  for ( var i = 0; i < geometry.faces.length; i ++ ) {
    geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
  }

Answer 1

Three.js 中的 BufferGeometries 与常规的 Geometries 有着根本的不同。它们不是面向易于操作，而是面向网格需要如何传递到 WebGL API。
也就是说，BufferGeometries 没有明确的“面”概念，它们是隐含的。 BufferGeometry 由许多属性组成(对于背景 see here)，其中之一是 position -属性。
在常规的 BufferGeometry(与“索引”相反)中，面存储为该属性中三个顶点的序列(类似于 [x1, y1, z1, x2, y2, z2, x3, ...]，因此对于第一个面 position[0] 是第一个顶点的 x 分量，并且position[8] 是第三个顶点的 z 分量)。所有其他属性都使用类似的索引方案。如果你定义了一个属性 color对于几何图形，您可以通过在所有三个面顶点的位置写入相同的颜色值来控制面颜色(因此在本例中，带有 [r, g, b, r, g, b, r, g, b, ...] 的颜色属性会将相同的 rgb 值分配给三个第一个三角形的顶点)。
索引几何是不同的:不是重复所有三角形的顶点，每个顶点只存储一次。附加属性 index用于将顶点连接成三角形。所以索引属性可能看起来像这样:[0, 1, 2, 0, 2, 3, ...]读作“从位置 0、1 和 2 处的顶点构造第一个三角形”等等。
由于这是一种非常有效的几何图形存储方式，因此该技术适用于 Three.js 中的大多数(甚至全部)内置几何图形。
对于索引几何，每个面顶点不可能有颜色，因为顶点在任何使用它的地方都必须具有相同的颜色。但是，您可以使用 bufferGeometry.toNonIndexed()将索引几何转换为常规几何。