Get Correct Amount and XYZ of Mesh Vertices, for Animation

Questions
,
1

Dear reader,

How do i get and animate the vertices of the dodecahedron.

Two Goals:

  • add sphereObjects to its 20 vertices,
  • animate the vertices positions and spheres with the GUI

Problem:
the code below gives me 107 vertices, and as far as i know, a dodecahedron has only 20.
if i try to let the for loop run only 20 times, i see there are equal results in the console, so these values cannot be the 20 vertices of the dodecahedron

can someone explain, or share an example so i can learn from the example, because i also have a curve, i would like to be able to update by sliders in the GUI, instead of removing the curve from the scene and add a new one.

This new Upgrade of THREE is for this newby hard to get his head around…

what is going on in this positions array?
i am trying to update my understanding of the new THREE
in older versions it was easy to ask for the vertices with their xyz values

and after many hours of trying and searching online, i cannot find any good tutorial on this mayor change in THREE

Thank you in advance…

const geoDodeca = new THREE.DodecahedronGeometry( 3, 0 );
// geoDodeca.attributes.position.needsUpdate = true;
const matDodeca = new THREE.MeshLambertMaterial(
	{
		// wireframe: true,
		color: 0x0077ff,
		depthTest: true,
		depthWrite: true,
		flatShading: true,
		dithering: true,
		transparent: true,
		opacity: 0.3
	}
)

let meshDodeca = new THREE.Mesh(geoDodeca, matDodeca);
meshDodeca.name = 'dodecaMesh';
arrObjects.push(meshDodeca)

// :. selecting the dodeca vertices
const positionAttribute = meshDodeca.geometry.getAttribute( 'position' );
const vertex = new THREE.Vector3();

// for ( let i = 0; i < 20; i ++ ) {
for ( let i = 0; i < positionAttribute.count; i ++ ) {
	vertex.fromBufferAttribute( positionAttribute, i );

	// do something with vertex
	console.log('Vtx id: ' + i + '   ' + vertex.x + ', ' + vertex.y + ', ' + vertex.z )
	// console.log(vertex)
}