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示例