首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >设置缓冲区几何顶点颜色的透明度,而不是在三个in中设置颜色。

问设置缓冲区几何顶点颜色的透明度,而不是在三个in中设置颜色。
EN

Stack Overflow用户
提问于 2020-07-15 17:22:30
回答 1查看 684关注 0票数 0

我有一个粒子云,我用缓冲区几何学制作了三个粒子云,我通过THREE.LineSegments将这些粒子与一个THREE.LineBasicMaterial连接起来:

​

​

正如你所看到的,有些线条是黑色或灰色的--我想让它变成透明的白色阴影。

我相信这是有关的代码行:

代码语言:javascript
复制
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;
        
      }
    }
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-15 17:57:59

简单答案

默认的three.js着色器将顶点颜色实现为vec3 (RGB),因此没有透明组件。

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

高级答案

您可以编写自己的着色器,将颜色属性作为vec4来接受,为每种颜色添加一个透明组件。您需要进一步了解线型材料是如何使用颜色的,以及它是如何沿着一条线混合顶点颜色的。或者,因为它是你的着色器,让它做你想要的混合。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62920456

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档