My unique example showcases the intricacies of defining faces without vertices sharing the same texture and normals indices. Unlike traditional Geometry, in BufferGeometry, each index specified in the indices array corresponds to vertices, uvs, and normals arrays. This distinction prevents vertices from being reused, as elaborated by @gaitat.
v 1 2 3
v 4 5 6
v 7 8 9
vt 0 1
vt 0.5 0.5
vt 1 0
vn 0 0 1
vn 0 1 0
vn 1 0 0
f 1/1/1 2/2/2 3/3/3
f 1/1/2 2/2/3 1/2/3
var vertices = [1,2,3, 4,5,6, 7,8,9, 1,2,3, 4,5,6, 1,2,1]; // itemSize: 3
var uvs = [0,1, 0.5,0.5, 1,0, 0,1, 0.5,0.5, 0.5,0.5]; // itemSize: 2
var normals = [0,0,1, 0,1,0, 1,0,0, 0,1,0, 1,0,0]; // itemSize: 3
var indices = [0,1,2, 3,4,5]; // itemSize: 1
Edit: In the revised example, the second vertex of the first face (2/2/2) is indexed with 1. Thus, retrieving the corresponding items from vertices, uvs, and normals array yields 4,5,6 0.5,0.5 0,1,0. Similarly, the second vertex of the second face (2/2/3) is indexed with 4, resulting in the retrieval of the 5th item set from each array: 4,5,6 0.5,0.5 1,0,0. Although the vertex positions and uvs are identical, differing normals prevent reuse due to the single index assigned for all three attributes.
f 1/1/1 2/2/2 3/3/3
f 1/1/2 2/2/2 1/2/3
var vertices = [1,2,3, 4,5,6, 7,8,9, 1,2,3, 1,2,1]; // itemSize: 3
var uvs = [0,1, 0.5,0.5, 1,0, 0,1, 0.5,0.5]; // itemSize: 2
var normals = [0,0,1, 0,1,0, 1,0,0, 0,1,0, 1,0,0]; // itemSize: 3
var indices = [0,1,2, 3,1,5]; // itemSize: 1
By examining this scenario, it becomes evident that when both faces share the same second vertex (2/2/2), efficient reusability can be achieved. The shorter arrays reflect this optimization, reinforced by the consistent indexing of the shared vertex in the second face as 1.