pratik mankar pratik mankar - 6 months ago 57
Javascript Question

Threejs IcosahedronGeometry vertex color

I am trying to change color of a selected vertex dynamically. Referring to, I created a IcosahedronGeometry point cloud geometry and on click event I would like to change the color of vertex


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

Now, I have two questions:

  1. How to make the vertex
    change its colors

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


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 = [];
    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.colorsNeedUpdate = true;

jsfiddle example