首页 / three.js / API 文档

Points

先看结论

点云对象。几何体里的每个顶点被渲染成一个小方块或贴图点，是激光点云、粒子、散点最直接的呈现方式。

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

new THREE.Points(geometry, material)

构造参数

参数	默认	说明
`geometry`	new BufferGeometry()	只需 `position` 属性，可选 `color`
`material`	new PointsMaterial()	点材质，决定大小、颜色与贴图

属性与方法

成员	说明
`geometry`	几何体，运行时替换后旧几何不会自动释放
`material`	点材质
`isPoints`	恒为 true，遍历时用于类型判断
`morphTargetInfluences`	变形目标权重
`raycast(raycaster, intersects)`	射线拾取，由 `Raycaster` 调用
`clone()` / `copy(source)`	复制对象，几何与材质仍是引用
`updateMorphTargets()`	刷新变形目标

示例：从坐标数组生成点云

const positions = new Float32Array(points.length * 3);
const colors = new Float32Array(points.length * 3);
const color = new THREE.Color();

points.forEach(function (p, i) {
  positions[i * 3] = p.x;
  positions[i * 3 + 1] = p.y;
  positions[i * 3 + 2] = p.z;

  color.setHSL(0.6 - p.height * 0.002, 0.55, 0.55);
  colors[i * 3] = color.r;
  colors[i * 3 + 1] = color.g;
  colors[i * 3 + 2] = color.b;
});

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const material = new THREE.PointsMaterial({
  size: 2,
  sizeAttenuation: false,
  vertexColors: true,
  transparent: true,
  opacity: 0.85,
  depthWrite: false
});

const cloud = new THREE.Points(geometry, material);
cloud.frustumCulled = false;   // 包围盒尚未计算时避免整体被剔除
scene.add(cloud);

sizeAttenuation 的取舍

为 true 时点的大小按透视距离缩放，近处大、远处小，接近真实观感；为 false 时所有点固定屏幕像素大小，适合工程点云和符号化散点，远处也能看清分布。两种模式下 size 的单位不同，调参前先确定这一项。

性能与显存

一百万个点约占 12 MB 位置数据，加上颜色翻倍。真正的瓶颈在填充率：点铺满屏幕时每个像素都要做一次混合。把 depthWrite 关掉、减少重叠、按距离抽稀，比调小 size 更有效。

拾取

Raycaster 对点的命中判定基于点的包围盒阈值，在透视相机下误差明显。需要精确选取点要素时，用屏幕空间距离判断，或为每个点生成一个不可见的拾取代理。

点不是精灵。点没有旋转、没有独立缩放，也不能逐点换贴图。需要图标随相机朝向的面片时用 Sprite，需要每个点独立的尺寸与朝向时改用实例化平面。

引用本文

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