首页 / three.js / API 文档

Line

先看结论

把一列顶点连成折线，是轨迹、边界与等值线最直接的表达方式。

最后验证 2026-11-03 · three.js 0.160.0 · 更新 2026-10-28 · 引用本文

new THREE.Line(geometry, material) → Line

构造参数

参数	默认	说明
`geometry`	new BufferGeometry()	顶点按顺序连接，相邻两点构成一段
`material`	new LineBasicMaterial()	线材质，普通网格材质不能直接用

属性

属性	说明
`geometry`	线几何体，至少要有 `position` 属性
`material`	线材质实例
`isLine`	只读标记
`visible`	继承自 `Object3D`，隐藏整条线用

方法

方法	说明
`computeLineDistances()`	计算累计长度，虚线材质依赖它
`raycast(raycaster, intersects)`	按 `params.Line.threshold` 判定命中
`copy(source)` / `clone()`	复制属性，几何体与材质为引用共享

三个同类

类	顶点连接方式	典型用途
`Line`	首尾相连成一条折线	轨迹、剖面线、单条边界
`LineSegments`	每两个顶点独立成段	格网、批量线段，顶点数少一半开销
`LineLoop`	同上并自动闭合首尾	面状要素轮廓

基本用法

const points = [];
for (let i = 0; i <= 120; i++) {
  const t = i / 120;
  points.push(new THREE.Vector3(
    Math.cos(t * Math.PI * 2) * 12,
    Math.sin(t * Math.PI * 6) * 1.6,
    Math.sin(t * Math.PI * 2) * 12
  ));
}

const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(
  geometry,
  new THREE.LineBasicMaterial({ color: 0x4f9ef8 })
);

scene.add(line);

setFromPoints 会新建一个 position 属性，传入的每一项都要带 x、y、z，所以坐标数组需要先转成 Vector3。顶点数量在创建后要变，只能重建几何体或改写属性数组，不能直接往属性里追加。

虚线

const material = new THREE.LineDashedMaterial({
  color: 0xf0b429,
  dashSize: 1.2,
  gapSize: 0.8,
  scale: 1
});

const dashed = new THREE.Line(geometry, material);
dashed.computeLineDistances();   // 必须调用，否则虚线不显示
scene.add(dashed);

dashSize、gapSize 与 scale 的单位都是世界单位，相机拉远后虚线会密到看不出间隔。若希望屏幕上的虚线密度稳定，需要按相机距离动态调整 scale。

线宽为什么设了没用

WebGL 只保证 1 像素宽的线，多数平台会直接忽略 linewidth 大于 1 的设置。要在三维场景里画粗线，有两种常用替代：

一是使用 addons 里的 Line2 与 LineMaterial，它们把线段展开成面向相机的四边形，支持像素宽度与端点样式，代价是顶点数膨胀；二是沿路径生成管状几何体 TubeGeometry，它真正具有体积，可以接受光照与阴影，适合做河流、管线这类需要立体感的线。

// 方案二：用管道表示有宽度的线
const curve = new THREE.CatmullRomCurve3(points);
const tube = new THREE.Mesh(
  new THREE.TubeGeometry(curve, 240, 0.28, 8, true),
  new THREE.MeshStandardMaterial({ color: 0x4f9ef8, roughness: 0.5 })
);
scene.add(tube);

贴地线条会闪烁。线与地面处在同一深度时会产生深度冲突。把线整体抬高一点、或给材质加 polygonOffset，都比关闭深度测试可靠——关掉深度测试后，线会穿透前面的所有物体。

线只是几何。three.js 不知道要素类型、拓扑关系与属性，这些需要在构造成顶点之前整理完毕。

引用本文

经纬志（2026）。《Line》。https://www.jingweizhi.com/three/api/line.html（访问日期 2026-11-03）。