Line
Quick answer
Line connects an ordered vertex list into a polyline, the simplest way to draw trajectories, boundaries, and contour lines. Provide a BufferGeometry with a position attribute and a line-capable material such as LineBasicMaterial; LineSegments and LineLoop cover other connectivity patterns. Rendered width stays one pixel on most platforms unless you use a wide-line addon.
new THREE.Line ( geometry , material ) → Line
Key points
- Line joins every consecutive pair; LineSegments treats pairs independently and LineLoop closes the ends.
- computeLineDistances() is required before a dashed material displays correctly.
- raycast() uses Raycaster.params.Line.threshold as its hit tolerance.
Example
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);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);Notes
- linewidth values above 1 are ignored by most WebGL platforms.
- A line coplanar with the ground z-fights; raise it slightly or use polygonOffset.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Line. https://www.jingweizhi.com/en/three/api/line.html (accessed 2026-11-03).