Threejs IcosahedronGeometry顶点颜色

Question

我正在尝试动态更改选定顶点的颜色。 参考https://jsfiddle.net/pmankar/m70cpxes/ ，我创建了一个IcosahedronGeometry点云几何图形，并且在单击事件时我想更改顶点100的颜色。

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

现在，我有两个问题：

1. 如何使顶点100更改颜色
2. 为什么向点云显示随机颜色

Answer 1

您声明了var material ，然后创建了materail = new THREE.PointsMaterial(); 然后将material再次应用于您的mesh 。 有一个拼写错误： material ！= materail 。

另外，要具有不同颜色的顶点，必须设置它们的颜色

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

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

然后在材质中，必须将vertexColors设置为THREE.VertexColors

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

毕竟，您可以在“ click”事件监听器中执行

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

jsfiddle示例