無法更改 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 類型。