访问 BufferGeometry 中的面 [英] Access to faces in BufferGeometry

问题描述

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

geometry.faces accessible only for new THREE.BoxGeometry. Then I try to use THREE.BoxBufferGeometry I can't change color for faces.

不工作:

  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 );
  }

推荐答案

three.js 中的BufferGeometries 与常规的Geometries 有着根本的不同.它们的目标不是易于操作，而是需要如何将网格交付到 WebGL API.

BufferGeometries in three.js are fundamentally different from the regular Geometries. They are not oriented towards ease of manipulation but rather towards how meshes need to be delivered to the WebGL API.

话虽如此，没有明确的面孔"概念.对于 BufferGeometries，它们是隐式的.BufferGeometry 由许多属性组成(背景见这里)，其中之一是 position 属性.

That being said, there is no explicit notion of "faces" for BufferGeometries, they are implicit. A BufferGeometry consists of a number of attributes (for background see here), one of them is the position-attribute.

在常规的 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 值分配给第一个三角形的三个顶点).

In a regular BufferGeometry (as opposed to "indexed"), the faces are stored as sequences of three vertices within that attribute (something like [x1, y1, z1, x2, y2, z2, x3, ...], so for the first face position[0] is the x-component of the first vertex and position[8] is the z-component of the third vertex). All other attributes use a similar indexing-scheme. If you define an attribute color for the geometry, you can control the face-colors by writing the same color-value at the positions of all three face-vertices (so in this example a color-attribute with [r, g, b, r, g, b, r, g, b, ...] would assign the same rgb-value to the three vertices of the first triangle).

索引几何是不同的:不是重复所有三角形的顶点，每个顶点只存储一次.附加属性 index 用于将顶点连接成三角形.所以索引属性可能看起来像这样: [0, 1, 2, 0, 2, 3, ...] 读作从位置 0、1 和2"等等.

Indexed geometries are different: Instead of repeating the vertices for all triangles, every vertex is stored only once. An additional attribute index is used to connect the vertices into triangles. So an index-attribute might look like this: [0, 1, 2, 0, 2, 3, ...] which reads as "construct first triangle from vertices at positions 0, 1 and 2" and so on.

由于这是一种非常有效的几何存储方式，因此该技术适用于 Three.js 中的大多数(甚至全部)内置几何.

As this is a very efficient way of storing geometries, this technique is used with most (maybe even all) of the builtin geometries in three.js.

对于索引几何，每个面顶点不可能有颜色，因为顶点在任何使用它的地方都必须具有相同的颜色.但是，您可以使用 bufferGeometry.toNonIndexed() 将索引几何图形转换为常规几何图形.

With indexed geometries it is not possible to have colors per face-vertex because the vertex must have the same color everywhere it is used. You can however use bufferGeometry.toNonIndexed() to convert an indexed geometry into a regular one.

这篇关于访问 BufferGeometry 中的面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！