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

Question

我无法使用 three.js 和 Angular 更改鼠标单击时的顶点颜色。 我一直在阅读这个，我认为我应该设置顶点颜色，然后当我与我的场景相交时，我可以使用 object.attributes.color 中的颜色数组。 所以这就是我一直在尝试做的事情：

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

然后单击鼠标时：

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

  }

这很好用，当我单击其中一个顶点时，我会填充交叉点。 从那里我想做的就是访问交叉点[0].object.geometry.attributes.color.array[哪些索引？]。

首先，我知道我应该使用 position 和颜色之间的并行 arrays 来执行此操作，并且 position 和颜色之间的索引对于任何给定的顶点都是相同的。 对于我的测试集，那些 arrays 定义为：

长度：3747 项目大小：3，计数：1249，

当您意识到 1249 * 3 = 3747 时，这似乎是合理的。所以我的 object 的索引为 124，我查看索引 124 * 3 = 372 中的位置数组，期望这是我的 x 值，但它不匹配任何已选择的点 object 中保存的点值。

更令人沮丧的是，当我尝试编写代码时， intersection[0].object.geometry.attributes.color.array

我收到一条错误消息，指出 Object3D 上不存在属性（属性），即使我在单步执行时可以在调试器中看到它。 我也尝试过在 THREE.Points object 本身上相交，但差别不大。

那么有人知道我在哪里出错了吗？

Answer 1

必须自己设置索引，方法是将每个顶点/颜色的开始索引存储在属性 arrays 中，然后在我的几何图形上使用 setIndex 添加它。

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

注意 arrays 的类型似乎很重要，因为索引数组必须是 Uint16array 类型。