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中（与“indexed”相反），面部存储为该属性中的三个顶点的序列（类似于[x1, y1, z1, x2, y2, z2, x3, ...]，因此对于第一个面position[0]是x - 第一个顶点的组件，position[8]是第三个顶点的z分量。所有其他属性使用类似的索引方案。如果为几何定义属性color，则可以通过在所有三个面顶点的位置写入相同的颜色值来控制面颜色。

索引几何不同：每个顶点只存储一次，而不是重复所有三角形的顶点。附加属性index用于将顶点连接成三角形。每个具有索引几何的面顶点都不可能有颜色，因为顶点在任何地方都必须具有相同的颜色。但是，您可以使用bufferGeometry.toNonIndexed()将索引几何转换为常规几何。

Answer 2

所有必要的人https://threejs.org/docs/index.html#api/en/core/BufferGeometry

请参见示例：具有未索引面的网格，具有已索引面的网格...

我认为这个小例子会更有用：

const geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
const colorsAttr = geometry.attributes.position.clone();
// Faces will be colored by vertex colors
geometry.setAttribute('color', colorsAttr);
const material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors
});
const cube = new THREE.Mesh( geometry, material );

访问BufferGeometry中的面

2 个答案: