pratik mankar pratik mankar - 28 days ago 12
Javascript Question

Threejs IcosahedronGeometry vertex color

I am trying to change color of a selected vertex dynamically. Referring to https://jsfiddle.net/pmankar/m70cpxes/, I created a IcosahedronGeometry point cloud geometry and on click event I would like to change the color of vertex

100
.

document.addEventListener('click', function() {
mesh.geometry.colorsNeedUpdate = true;
mesh.geometry.colors[100] = new THREE.Color("rgb(255,0,0)");
console.log(mesh.geometry);
})


Now, I have two questions:


  1. How to make the vertex
    100
    change its colors

  2. Why is it showing random color to the point cloud


Answer

You declared var material, then created materail = new THREE.PointsMaterial(); and then applied material again to your mesh. There's a typo: material != materail.

Also, to have different colors of vertices you have to set colors of them

  geometry = new THREE.IcosahedronGeometry(102, detailsLevel);

  var colors = [];
  geometry.vertices.forEach(function(){
    colors.push(new THREE.Color(0xffffff));
  });
  geometry.colors = colors;

and then in your material you have to set vertexColors as THREE.VertexColors

material = new THREE.PointsMaterial( { size:4, vertexColors: THREE.VertexColors} );

after all, in your "click" event listener you can do

mesh.geometry.colors[100].set(0xff0000);
mesh.geometry.colorsNeedUpdate = true;

jsfiddle example