javascript - Threejs 二十面体几何顶点颜色

Question

我正在尝试动态更改选定顶点的颜色。引用https://jsfiddle.net/pmankar/m70cpxes/ ，我创建了一个二十面体几何点云几何体，并且在单击事件时我想更改顶点 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 应用到您的 网格。有一个拼写错误:material!= materail。

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

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

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

然后在您的 Material 中，您必须将vertexColors设置为THREE.VertexColors

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

毕竟，在你的“点击”事件监听器中你可以这样做

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

jsfiddle示例