Threejs绘制有宽度的线（Line2）

Line

在 API 中提供了 Line LineLoop LineSegments 三类线相关的物体, LineBasicMaterial 和 LineDashedMaterial 两类材质，主要控制线的颜色，宽度等（线宽linewidth不生效）

由于底层 OpenGL 渲染的限制性，线宽的最大和最小值都只能为 1，线宽无法设置，那么线段之间的连接形状设置也就没有意义了，因此这三个设置项都是无法生效的。

Line2

如何解决线宽问题？
ThreeJS 官方提供了一个可以设置线宽的 demo，这个 demo 使用了扩展包 jsm 中的材质 LineMaterial、几何体 LineGeometry 和对象 Line2。
官网DEMO

import * as THREE from 'three';
import { LineGeometry, LineMaterial, Line2 } from 'three/lib';

// 创建线条
const positions = []; // 顶点数据
positions.push(new THREE.Vector3(0, 0, 0));
positions.push(new THREE.Vector3(10, 0, 0));
const lineGeometry = new LineGeometry();
lineGeometry.setPositions(positions);

// 创建线条材质
const lineMaterial = new LineMaterial({
    color: 0xff0000, // 线条颜色
    linewidth: 2, // 线条宽度
    dashed: false, // 是否是虚线
});

// 创建 Line2 对象
const line = new Line2(lineGeometry, lineMaterial);
line.computeLineDistances(); // 计算线段距离以用于虚线材质

// 将线条添加到场景中
scene.add(line);

遗留问题

在使用Line2对象时，需要动态更新line2的位置（即改变positions数组），但是在创建完线添加到场景中后在调用lineGeometry.setPositions(arr)方法， 会造成线段不展示。
暂时只能通过线段销毁重新创建的方式更新线段，哪路大神路过，可以指点一下🙏🙏🙏