如何在绘画线条中设置不透明度使用three.js，使用LineBasicMaterial？

如何解决如何在绘画线条中设置不透明度使用three.js，使用LineBasicMaterial？

我想更改线条的宽度和不透明度以及我的代码，如下所示：

 var geometry_link = new THREE.Geometry();
 geometry_link.vertices.push(
 new THREE.Vector3(item[0].x *1,item[0].y *1,item[0].z),new THREE.Vector3(item[1].x *1,item[1].y *1,item[1].z)
 );
 geometry_link.colors.push(
 new THREE.Color(0x000000),new THREE.Color(0xffffff)
 );
 var line = new THREE.Line(geometry_link,new THREE.LineBasicMaterial({
     vertexColors: true,linewidth: 8,transparent: true,opacity: 0.1
})

但是行宽和不透明度都行不通。我发现了类似的问题，说线宽在Windows上不起作用，那是5年前了，现在怎么样？ 谢谢你的想法

解决方法

LineBasicMaterial确实支持透明线，如以下实时示例所示：

let camera,scene,renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight,0.01,10);
  camera.position.z = 1;

  scene = new THREE.Scene();

  const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(),new THREE.Vector3(1,0)]);
  const material = new THREE.LineBasicMaterial({
    transparent: true,opacity: 0.5
  });

  const mesh = new THREE.Line(geometry,material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth,window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene,camera);

}

body {
      margin: 0;
}
canvas {
  display: block;
  }

<script src="https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.js"></script>

但是不支持宽行。因此，在大多数浏览器中，将linewidth设置为1之类的其他值无效。这是在行图元上下文中的WebGL限制。

但是，three.js提供了一种基于三角形（有时称为网格线或带状线）的宽线实现。请查看以下示例以获取更多信息：

https://threejs.org/examples/webgl_lines_fat