2016-11-10 3 views
0

Ich versuche die Farbe eines ausgewählten Eckpunkts dynamisch zu ändern. Unter Bezugnahme auf https://jsfiddle.net/pmankar/m70cpxes/ habe ich eine IcosahedronGeometry-Punktwolkengeometrie erstellt, und beim Klickereignis möchte ich die Farbe des Scheitelpunkts 100 ändern.Threejs IkosaederGeometry Vertexfarbe

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

Nun habe ich zwei Fragen:

  1. Wie der Scheitelpunkt machen 100 seine Farben
  2. Warum ändern wird gelegentliche Farbe der Punktwolke zeigt

Antwort

1

Sie erklärt var material, dann materail = new THREE.PointsMaterial(); erstellt und dann material erneut auf Ihre angewendet. Es gibt einen Tippfehler: material! = materail.

, auch verschiedene Farben von Eckpunkten zu haben, haben Sie Farben von ihnen setzen

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

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

und dann in Ihrem Material haben Sie vertexColors als THREE.VertexColors

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

schließlich zu setzen, in der "click" event listener, den Sie tun können

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

jsfiddle Beispiel

+0

Dies ist genau das, was ich gesucht habe. So dumm von mir, einen Tippfehler zu machen. –