Javascript three.js-如何使用alpha通道渲染线？

我创造了一个例子来说明我的问题

请注意，当我在第55行初始化渲染器时，我包括一个alpha通道：

renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: aa,
  alpha: true
});
renderer.setSize(canvas.clientWidth, canvas.clientHeight);

我还将以下属性添加到第32行的几何体中：

var ds = 1.0 / maxPoints;
var vertPos = new Float32Array(maxPoints);
for (var i = 1; i < maxPoints; i++)
  vertPos[i] = i * ds;
geometry.addAttribute('vertPos', new THREE.BufferAttribute(vertPos, 1));

属性浮动顶点；可变浮点数；void main（）{gl_Position=projectionMatrix*modelViewMatrix*vec4（Position，1.0）；fragPos=vertPos；}
vec3颜色均匀；可变浮点数；void main（）{gl_FragColor=vec4（颜色，fragPos）；}

如何使用alpha通道在three.js中渲染线

设置对象的属性

true

：

material=new THREE.ShaderMaterial({
vertexShader:document.getElementById（'vshader'）.textContent，
fragmentShader:document.getElementById（'fshader'）.textContent，
制服：{
颜色：{
类型：“v3”，
值：col
}
},
depthWrite:false，
深度测试：假，
lineWidth:lw，//很遗憾，这总是默认为1
透明：正确
});

请参见示例，其中我将更改应用于原始代码：

var画布、场景、渲染器、材质、几何体、线条；
var maxPoints=256；
var支取计数=1；
//初始化渲染
函数初始化（aa、cdist、fov、lw、col）{
canvas=document.getElementById（'gl_canvas'）；
摄像机=新的三个透视摄像机（视野，视窗内宽/视窗内高，1500）；
摄像机位置设置（0，0，cdist）；
摄影机。注视（新的三个向量3（0，0，0））；
几何体=新的三个。缓冲几何体（）；
var位置=新阵列（3*maxPoints）；
位置[0]=数学随机（）；
位置[1]=数学随机（）；
位置[2]=数学随机（）；
geometry.addAttribute（'position'，新的三个.BufferAttribute（positions，3））；
//添加顶点位置属性
var ds=1.0/最大点；
var vertPos=新的浮点数组（maxPoints）；
对于（变量i=1；i

属性浮动顶点；可变浮点数；void main（）{gl_Position=projectionMatrix*modelViewMatrix*vec4（Position，1.0）；fragPos=vertPos；}
vec3颜色均匀；可变浮点数；void main（）{gl_FragColor=vec4（颜色，fragPos）；}