无法更改 three.js PointCloud 的顶点颜色

Question

I am having trouble changing the colour of a vertex on a mouse click using three.js and Angular. I have been reading around this and I think I should be setting up vertex colours and then when I intersect against my scene I can use the color array in object.attributes.color. So this is what I have been attempting to do:

createCloud() {
    const vertices = [];
    
    this.data.forEach(line => {
      vertices.push(line.XX , line.YY , line.ZZ);
      this.colours.push(this.originalColour.r, this.originalColour.g, this.originalColour.b);
    });

    this.geometry = new THREE.BufferGeometry();
    this.geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
    this.geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(this.colours), 3));

    var material = new THREE.PointsMaterial({size: this.pointSize, vertexColors: true});
    this.points = new THREE.Points(this.geometry, material);
    this.geometry.center();
    this.scene.add(this.points);
  }

and then when the mouse is clicked:

    public onMouseDown(event){  
    
        var mousePosition = new THREE.Vector3();
        mousePosition.setX(2 * (event.clientX / this.container.nativeElement.clientWidth) - 1);
        mousePosition.setY(1 - 2 * (event.clientY / this.container.nativeElement.clientHeight));
    
        this.caster.setFromCamera(mousePosition, this.camera);
        var intersections = this.caster.intersectObjects(this.scene.children, true);
    
        if(intersections && intersections.length > 0){
          
        }
    
        console.log("Mouse is down! " + mousePosition.x + " " + mousePosition.y + " " + intersections.length);

  }

This works fine and when I click on one of the vertices I get intersections populated. From there all I want to do is access the intersection[0].object.geometry.attributes.color.array[which indexes?].

Firstly I understand that I should be doing this with parallel arrays between position and color and the indexes between position and color would be the same for any given vertex. those arrays, for my test set, are defined to be:

length: 3747 itemSize: 3, count: 1249,

which seems reasonable when you realise that 1249 * 3 = 3747. so with my object having an index of 124 I take a look at my positions array in index 124 * 3 = 372 expecting that to be my x value but it does not match any of the point values held in the point object that has been selected.

Even more frustrating is that when I attempt to write the code intersection[0].object.geometry.attributes.color.array

I get an error stating that property (attributes) does not exist on Object3D even though I can see it in the debugger when I step through. I have also tried intersecting on the THREE.Points object itself but with little difference.

So does anyone know where I am going wrong here?

Answer 1

Had to set the indexes myself by storing the index of the start of each vertex/colour in the attribute arrays and then add it using setIndex on my geometry.

const vertices = new Float32Array(this.data.length * 3);
    const colours = new Float32Array(this.data.length * 3);
    const indices = new Uint16Array(this.data.length);

    let indexByThree = 0; 
    let index = 0;
    let colorValues: number[] = [this.originalColour.r, this.originalColour.g, this.originalColour.b];

    this.data.forEach(line => {
      let cords: number[] = [line.XX, line.YY, line.ZZ];
      let iArray = [indexByThree];

      vertices.set(cords, indexByThree);
      colours.set(colorValues, indexByThree);      
      indices.set(iArray, index);

      indexByThree += 3;
      index++;
    });
    
    this.geometry = new THREE.BufferGeometry();
    this.geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    this.geometry.setAttribute('color', new THREE.BufferAttribute(colours, 3, true));
    this.geometry.setIndex(new THREE.BufferAttribute(indices, 1));

Watch out as the type of the arrays seem important with the indices array having to be of type Uint16array.