点、线

Points & Lines

▶ 在线运行案例

你将学到什么

• Points + PointsMaterial 绘制点精灵
• Line + LineBasicMaterial 绘制线段
• size 是 屏幕像素 而非世界单位

效果说明

同一三角形顶点，以 黄色大点 和 红色线段 两种方式叠加显示。旋转场景时可看到线的连接顺序。

核心概念

WebGL 有三种基本绘制模式：

POINTS      →  Three.Points
LINES       →  Three.Line / LineSegments / LineLoop
TRIANGLES   →  Three.Mesh

PointsMaterial.size

new THREE.PointsMaterial({
    color: 0xffff00,
    size: 10.0  // 单位：像素（screen space），不受透视影响
});

若需要 世界空间大小 的点（远小近大），需自定义 Shader 或在顶点着色器里用 gl_PointSize。

Line 连接规则

THREE.Line 按 position 数组顺序 依次连线：0→1→2→0→1→2…
若要单独控制每条边，用 LineSegments；闭合环用 LineLoop。

实现步骤

1. 复用 网格 的 BufferGeometry（6 顶点）
2. Points + PointsMaterial → 黄色点
3. Line + LineBasicMaterial → 红色线
4. 两者 scene.add

代码要点

const points = new THREE.Points(geometry, new THREE.PointsMaterial({
    color: 0xffff00,
    size: 10.0
}));
const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: 0xff0000
}));
scene.add(points, line);

粒子系统

大规模点云（万级以上）通常用 Points + 自定义 shader，或 粒子案例 中的 BufferGeometry 实例化方案。

源码

完整源码见 在线案例。

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene();
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    0,0,0, 50,0,0, 50,0,50,
    0,0,0, 0,0,50, 50,0,50,
]);
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);

const points = new THREE.Points(geometry, new THREE.PointsMaterial({ color: 0xffff00, size: 10.0 }));
const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff0000 }));
scene.add(points, line);
// ... camera, renderer, OrbitControls

小结

• 点/线/面共享同一套顶点数据，只是 绘制模式 不同
• 下一篇：顶点颜色 — per-vertex 着色

入门案例 · Three.js · 8/15