THREE.js中使用line2绘制线条

Line2 最大的优点就是可以直接通过材质进行设置线条的宽度粗细

但是看了很多的解释文档都给出的是

line.scale.set(1, 2, 1); // 设置线条的粗细为2倍

我实际应用了一下，我理解的粗细是指线的宽度，整体线是粗的还是细的例如下图：

 但是 我设置scale属性，并不能达到这种效果，如图：

 所以想要改变线条粗细 我们需要在matline中设置

linewidth: 5

这个属性是可以改变线条的粗细的

实现的例子：代码中的points是一个三维点数组

      // line2方式
      const colors = [];
      for (let i = 0; i < points.length; i++) {
        colors.push(1, 1, 0);
      }

      const material = new LineMaterial({
        color: 0xff0000,
        linewidth: 2,
        vertexColors: true,
        dashed: false,
        alphaToCoverage: true,
        transparent: true,
      });
      material.resolution.set(window.innerWidth, window.innerHeight)
      const geometry = new LineGeometry();
      console.log('pts',points.map((point: { x: number, y: number, z: number }) => [point.x, point.y, point.z]).flat());
      
      geometry.setPositions(points.map((point: { x: number, y: number, z: number }) => [point.x, point.y, point.z]).flat());
      geometry.setColors(colors);

      const line = new Line2(geometry, material);
      // line.computeLineDistances();      //计算需要的距离
      GlobalApi.scene3D.add(line);

在three.js中，想要绘制线条的方式除了line2还有很多种，例如：

1.`THREE.Line`：这个方式是通过使用顶点数据来创建线条的， 线条是不能设置宽度粗细

import * as THREE from 'three';

const lineGeometry: THREE.BufferGeometry = new THREE.Geometry();
lineGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); // 添加起点
lineGeometry.vertices.push(new THREE.Vector3(1, 1, 1)); // 添加终点

const lineMaterial: THREE.LineBasicMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });

const line: THREE.Line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

2.`THREE.LineSegments`： 与THREE.Line类似，但是可以通过一系列的点创建出多段线，并可以调节线条宽度粗细

const lineGeometry: THREE.BufferGeometry = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(1, 1, 1),
  new THREE.Vector3(2, 2, 2)
]);

const lineMaterial: THREE.LineBasicMaterial = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 2 });

const line: THREE.LineSegments = new THREE.LineSegments(lineGeometry, lineMaterial);
scene.add(line);

3. `THREE.LineLoop`： 首尾相连的线 ， 也就是形成了一个闭合的图形，不能设置宽度粗细

const lineGeometry: THREE.BufferGeometry = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(1, 1, 1),
  new THREE.Vector3(2, 2, 2)
]);

const lineMaterial: THREE.LineBasicMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });

const line: THREE.LineLoop = new THREE.LineLoop(lineGeometry, lineMaterial);
scene.add(line);

4.`THREE.CatmullRomCurve3`： 根据Vectors3三位点创建平滑的三维样条曲线

const curve: THREE.CatmullRomCurve3 = new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(1, 1, 1),
  new THREE.Vector3(2, 2, 2)
]);

const points = curve.getPoints(50); // 获取曲线上的点

const lineGeometry: THREE.BufferGeometry = new THREE.BufferGeometry().setFromPoints(points);

const lineMaterial: THREE.LineBasicMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });

const line: THREE.Line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

CatmullRomCurve3(points:Array， closed: Boolean, curveType: strinng, tension:Float) 

points – Vector3点数组
closed – 该曲线是否闭合，默认值为false。
curveType – 曲线的类型，默认值为centripetal。
tension – 曲线的张力，默认为0.5。

getPoints()：获得离散点，参数是曲线上生成点的数量

setFromPoints()： 定义线条的顶点