three.js r142 绘制线条

在 three.js 中，要绘制线条，可以使用 THREE.Line 或 THREE.LineSegments 对象。以下是一个简单的例子：

// 创建一个几何体，包含两个点
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0)); // 第一个点坐标
geometry.vertices.push(new THREE.Vector3(10, 0, 0)); // 第二个点坐标

// 创建一个材质，设置线条的颜色和宽度
var material = new THREE.LineBasicMaterial({
  color: 0xff0000, // 红色
  linewidth: 2, // 线条宽度
});

// 创建线条对象
var line = new THREE.Line(geometry, material);

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

上面的代码创建了一个由两个点组成的线条，颜色为红色，宽度为 2。

如果想要绘制多条线段，可以使用 THREE.LineSegments 对象。和 THREE.Line 不同的是，THREE.LineSegments 中的每两个相邻的顶点都会被视为一条线段，因此需要提供一个 indices 数组来指定哪些顶点应该被组合成线段。

下面是一个绘制多条线段的例子：

// 创建一个几何体，包含多个点
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(-5, 5, 0));
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(5, -5, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));

// 指定哪些顶点应该被组合成线段
geometry.setIndex([0, 1, 1, 2, 2, 3, 3, 4]);

// 创建一个材质，设置线条的颜色和宽度
var material = new THREE.LineBasicMaterial({
  color: 0x00ff00, // 绿色
  linewidth: 2, // 线条宽度
});

// 创建线段对象
var lineSegments = new THREE.LineSegments(geometry, material);

// 将线段添加到场景中
scene.add(lineSegments);

上面的代码创建了由多个点组成的线段，颜色为绿色，宽度为 2。其中，indices 数组指定了哪些顶点应该被组合成线段。