在threejs中設置緩沖區幾何頂點colors的透明度而不是顏色

Question

我有一個粒子雲，我在 threejs 中使用緩沖區幾何形狀制作，我通過 THREE.LineSegments 將這些粒子與 THREE.LineBasicMaterial 連接起來：

正如你可以（有點）看到的那樣，有些線條是黑色或灰色的——我想把它做成透明的白色陰影。

我相信這是相關的代碼行：

var material = new THREE.LineBasicMaterial({
    vertexColors: THREE.VertexColors,
    blending: THREE.AdditiveBlending,
    color: 0xffffff,
    transparent: true,
  });

var colors = new Float32Array(segments * 3);

geometry.addAttribute(
    "color",
    new THREE.BufferAttribute(colors, 3).setDynamic(true)
); //will allow us to set the color of the lines between particles in buffer geometry

linesMesh = new THREE.LineSegments(geometry, material);

...

animate(){
  for (var i = 0; i < particleCount; i++) { //loop through particles to make line connections
    for (var j = i + 1; j < particleCount; j++) { //check collision
      var dist = Math.sqrt(dx * dx + dy * dy + dz * dz); //getting particle positions to neighbors
      if (dist < effectController.minDistance) { //make a connection
        var alpha = 1.0 - dist / effectController.minDistance; 
        colors[colorpos++] = alpha;
        
      }
    }
  }
}

Answer 1

簡單的答案

默認的 three.js 着色器將頂點 colors 實現為vec3 (RGB)，因此沒有透明度組件。

在https://github.com/mrdoob/three.js/blob/r118/src/renderers/webgl/WebGLProgram.js (r118) 中搜索USE_COLOR以查看此定義。

高級答案

您可以編寫自己的着色器來接受顏色屬性作為vec4 ，為每種顏色添加一個透明度組件。 您需要進一步了解線型材質如何使用 colors，以及它如何沿線混合頂點 colors。 或者，因為它是您的着色器，所以讓它按照您的意願進行混合。