Geometries on vertex of BufferGeometry in Three.js

Question

I thought I wanted a quiet simple thing, but it turned out to be more complicated then I expected..

All I want are meshes on every vertex of a THREE.BufferGeometry (a sphere)!

CODEPEN: codepen.io/cheesyeyes/pen/YwBZGz

this is what I want to have

This is my buffer geometry:

var bufferGeometry = new THREE.SphereBufferGeometry(1,1,1);

I'm trying to get the vertex's positions:

bufferGeometry.getAttribute('position',0);

so how do I read them out correctly so I get the positions of all (here 5) vertex of my bufferGeometry?

I tried it like this. It actually works, but its very ugly I think:

vertexMesh.position.x=position.array[0];
vertexMesh.position.y=position.array[1];
vertexMesh.position.z=position.array[2];

for(i=12;i<position.array.length-9;i=i+3)
            { 

            //vertexGeometry
            var vertexGeometry = new THREE.SphereGeometry(0.1,32,32);

            var vertexMaterial = new THREE.MeshBasicMaterial({color:0xff0000});   

            var vertexMesh = new THREE.Mesh(vertexGeometry,vertexMaterial);    

            vertexMesh.position.x=position.array[i];
            vertexMesh.position.y=position.array[i+1];
            vertexMesh.position.z=position.array[i+2]; 

             scene.add(vertexMesh);

            }

I simply don't get how this array is arranged.. please help me out! Thanks!

Answer 1

BufferGeometry stores vertices in a 1-dimensional array, where every set of three indices represent a single Vector3 (a vertex position). So if you had this array:

var verts = [0, 0, 0, 0, 1, 0, 1, 1, 1];

you should be thinking about it in (x, y, z) triplets:

vert # 1: (0, 0, 0)
vert # 2: (0, 1, 0)
vert # 3: (1, 1, 1)

In fact you can see an example of this in the three.js documentation; go read up on the BufferGeometry page and your question would probably answer itself:

// components of the position vector for each vertex are stored
// contiguously in the buffer.
for ( var i = 0; i < vertexPositions.length; i++ )
{
    vertices[ i*3 + 0 ] = vertexPositions[i][0];
    vertices[ i*3 + 1 ] = vertexPositions[i][1];
    vertices[ i*3 + 2 ] = vertexPositions[i][2];
}

That being said, is there a particular reason you're using BufferGeometry? You should only use that class if you really need to for optimization purposes. BufferGeometry stores its data as raw arrays of numbers and is much harder to access and manipulate than the regular Geometry class, which conveniently stores its vertices as an array of Vector3s. Stick to Geometry instead of BufferGeometry unless you have a compelling reason not to.