CODEWITHSUNDEEP
javascriptthree.js
pratik mankar
pratik mankar

Reputation: 126

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

Upvotes: 0

Views: 499

Answers (1)

prisoner849
prisoner849

Reputation: 17576

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

Upvotes: 1

Related Questions