javascript - 在threejs中设置缓冲区几何顶点颜色而不是颜色的透明度

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

标签： javascriptthree.jsbuffer-geometry

Answer 1

简单的答案

默认的three.js着色器将顶点颜色实现为vec3（RGB），因此没有透明度组件。

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

高级答案

您可以编写自己的着色器来接受颜色属性作为vec4替代，为每种颜色添加一个透明度组件。您需要进一步了解线型材质如何使用颜色，以及它如何沿线混合顶点颜色。或者，因为它是您的着色器，所以让它按照您的意愿进行混合。