LineBasicMaterial

构造参数

示例

const geometry = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(-5, 0, 0),
  new THREE.Vector3(0, 3, 0),
  new THREE.Vector3(5, 0, 0)
]);

const material = new THREE.LineBasicMaterial({
  color: 0x4aa3df,
  transparent: true,
  opacity: 0.9
});

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

linewidth 为什么无效

WebGL 的 gl.lineWidth 在多数实现中只接受 1， ANGLE 与部分驱动直接忽略大于 1 的值。three.js 保留了该参数， 但实际渲染仍是单像素线。这不是配置问题，而是图形接口的限制。

需要粗线时

官方附加模块提供 Line2 与 LineMaterial， 用几何面片模拟线，可设置像素宽度、虚线、端点与拐角：

import { Line2 } from 'three/addons/lines/Line2.js';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';

const lineGeometry = new LineGeometry();
lineGeometry.setPositions([-5, 0, 0, 0, 3, 0, 5, 0, 0]);

const lineMaterial = new LineMaterial({
  color: 0x4aa3df,
  linewidth: 3,          // 单位是像素
  worldUnits: false
});
lineMaterial.resolution.set(window.innerWidth, window.innerHeight);

const thick = new Line2(lineGeometry, lineMaterial);
thick.computeLineDistances();
scene.add(thick);

线段与闭合线