Vertex color on mesh

Questions
1

Hello,
I defined vertex and face data for a mesh box with a THREE.MeshPhongMaterial.
I would like change at runtime the material to vertex color. I add a keydown event listener.
When I press a key I saw the mesh became all white and I don’t understand why. Can you help me to fix it?

var geometry = new THREE.Geometry();
// define geometry for box

// define vertex data
geometry.vertices.push(new THREE.Vector3(-0.5, -0.5, -0.5));
// ...  
//define faces data
geometry.faces.push(new THREE.Face3(2, 1, 0 ));
// ... 

geometry.dynamic = true;
geometry.computeFaceNormals();
geometry.computeVertexNormals();

var material = new THREE.MeshPhongMaterial( { color: 0xA05E5B} );
mesh = new THREE.Mesh( geometry, material );
mesh.name = "cube";

document.addEventListener('keydown', (event) => {

          for (var j = 0; j < scene.children.length; j++) {
            var name = scene.children[j].name;

            if (name=="cube")
            {
              for (var i = 0;i <8; i++)
              {
                var face =  scene.children[j].geometry.faces[i];
                face.vertexColors[0]=new THREE.Color(0xff0000); // red
                face.vertexColors[1]=new THREE.Color(0x00ff00); // green
                face.vertexColors[2]=new THREE.Color(0x0000ff); // blue
              }
              scene.children[j].material = new THREE.MeshBasicMaterial({  vertexColors: THREE.VertexColors });
              scene.children[j].geometry.colorsNeedUpdate = true;
            }

           
          }


        }, false);
2

Hello, Mr.ale211734

I have done something similar before.
What about code like the one below?

// for (var i = 0;i <8; i++) {
const geometry = scene.children[j].geometry;
if (!geometry.attributes.color){
  const count = new BufferAttribute(new Float32Array( count * 3 ), 3);
  geometry.setAttribute("color", buffer);
}
const numVertices = geometry.attributes.color.array;
let colors = new Float32Array(numVertices);
const color1 = new Color("any1");
const color2 = new Color("any2");
const color3 = new Color("any3");
const vertex = new Vector3();
const positionArray = Array.from(geometry.attributes.position.array);
for (let i = 0; i <= positionArray.length - 3; i += 3) {
  vertex.set(positionArray[i], positionArray[i + 1], positionArray[i + 2]);
  if (i % 3 === 0) {
    colors.set(color1.toArray(), i);
  }
  else if (i % 3 === 1) {
    colors.set(color2.toArray(), i);
  }
  else if (i % 3 === 2) {
    colors.set(color3.toArray(), i);
  }
}
geometry.setAttribute("color", new BufferAttribute(colors, 3));

//}

i hope this helps you

PS: Is it possible to dynamically change only a portion of a material attached to a plane? - #5 by ShoOsaka