What is difference between BoxBufferGeometry vs BoxGeometry in Three.js?

Question

I am learning Three.js. I can't find a proper answer about the difference between BoxBufferGeometry vs BoxGeometry. Help me.

Answer 1

[Primitive]Geometry classes are manipulation friendly, memory unfriendly all JS geometry classes.

What this means that each piece of data that defines this geometry is stored as an instance of some class (Vector3,Vector2,Face3) etc. These come with convenience methods, so you can dot a vertex with some other vector, translate vertices, modify uvs, modify normals and such. But it has overhead in memory and performance (creating all these instances, storing them).

[Primitive]BufferGeometry classes are performance friendly geometry classes that rely on typed arrays to store the data in a WebGL friendly format.

What this means that vertices, instead of being an array of Vector3s are typed arrays:

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

They are much more efficient to store but much harder to manipulate.

If you want to modify a vertex:

With 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))

With 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 

However

THREE.BufferAttribute does have several methods to write and read stuff from that array. It is still a lot more verbose:

//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
)