Question

我正在学习Three.js。关于BoxBufferGeometry与BoxGeometry之间的区别，我找不到合适的答案。帮助我。

Answer 1

[Primitive]Geometry类是操作友好的，内存不友好的所有JS几何类。

这意味着定义此几何的每个数据都存储为某个类的实例（Vector3，Vector2，Face3）等。这些都带有便利方法，所以你可以用一些其他矢量点顶点，平移顶点，修改紫外线，修改法线等。但它在内存和性能上有开销（创建所有这些实例，存储它们）。

[Primitive]BufferGeometry类是性能友好的几何类，依赖于类型化数组以WebGL友好格式存储数据。

这意味着顶点而不是Vector3的数组是类型化数组：

Array[v0,v1... vN]
vs:
Float32Array[v0x,v0y,v0z,v1x,v1y,v1z... vNx,vNy,vNz]

它们存储效率更高，但操作起来更难。

如果要修改顶点：

使用Geometry

//with Geometry you just get vertex 5 and have access to it's x...
//AND the methods of the class -> Vector3.add(Vector3)
myGeom.vertices[5].add(new THREE.Vector3(1,2,3))

使用BufferGeometry

//xyz are just numbers, so with a stride of 3
//we select x , and  then the next two for y and z
//we have to know that the 15th number in this array is x of vertex 5...
const stride = 3
const index = 5
let offset = index * stride
myGeom.attributes.position.array[offset++] += 1 
myGeom.attributes.position.array[offset++] += 2 
myGeom.attributes.position.array[offset  ] += 3

<强>然而

THREE.BufferAttribute确实有几种方法可以从该数组中编写和读取内容。它仍然冗长得多：

//add x: 1 y: 2 z: 3 to 5th vertex

const index = 5
const attribute = myGeometry.attributes.position
const v3add = new THREE.Vector3(1,2,3)

attribute.setXYZ( 
  index, 
  attribute.getX(index) + v3add.x,
  attribute.getY(index) + v3add.y,
  attribute.getZ(index) + v3add.z
)

Answer 2

@Pailhead的回答是正确的。如果您需要以某种方式修改框...通过移动它的顶点或更改texcoords，可以更容易地操作BoxGeometry，但BoxBufferGeometry更有效地渲染。您可以使用.fromGeometry和.fromBufferGeometry来转换类型。

在Three.js中，BoxBufferGeometry与BoxGeometry有什么区别？

2 个答案: