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);
})

现在，我有两个问题：

如何使顶点100改变颜色
为什么它会向点云显示随机颜色

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} );

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

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

jsfiddle示例

Threejs IcosahedronGeometry顶点颜色

1 个答案: