首页 / three.js / API 文档

PointsMaterial

先看结论

点材质。控制点的大小、颜色、贴图与衰减方式，是 Points 的默认材质。

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

new THREE.PointsMaterial(parameters)

构造参数

参数	默认	说明
`color`	0xffffff	基础颜色
`size`	1	点的尺寸，单位取决于 `sizeAttenuation`
`sizeAttenuation`	true	true 时近大远小，false 时固定屏幕像素
`map`	null	点的贴图，圆点、光斑都靠它
`alphaMap`	null	透明通道贴图
`vertexColors`	false	开启后读取几何体的 `color` 属性
`alphaTest`	0	低于该透明度的像素直接丢弃，可消除排序问题
`transparent`	false	是否按透明对象排序渲染
`opacity`	1	整体透明度
`fog`	true	是否受场景雾影响
`blending`	NormalBlending	混合模式，发光点用 `AdditiveBlending`
`depthWrite`	true	是否写入深度，密集点云常关掉

示例：圆形点云

// 用画布生成一个圆点贴图，避免额外请求图片
function makeDotTexture(size) {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;

  const ctx = canvas.getContext('2d');
  const r = size / 2;
  const gradient = ctx.createRadialGradient(r, r, 0, r, r, r);
  gradient.addColorStop(0, 'rgba(255,255,255,1)');
  gradient.addColorStop(0.6, 'rgba(255,255,255,0.9)');
  gradient.addColorStop(1, 'rgba(255,255,255,0)');

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, size, size);

  const texture = new THREE.CanvasTexture(canvas);
  texture.colorSpace = THREE.SRGBColorSpace;
  return texture;
}

const material = new THREE.PointsMaterial({
  size: 6,
  sizeAttenuation: false,
  map: makeDotTexture(64),
  vertexColors: true,
  transparent: true,
  depthWrite: false,
  alphaTest: 0.02
});

const cloud = new THREE.Points(geometry, material);

size 单位

sizeAttenuation: true 时，size 是世界单位，远处的点在屏幕上变小，同一份数据在不同相机距离下观感差别很大。 false 时按屏幕像素计算，缩放到任何视角点都一样大，工程点云与符号化散点通常用这一种。

透明与深度

点云开启透明后，前后重叠的点需要正确排序。关掉 depthWrite 能避免互相遮挡，但半透明叠加会让密集区域偏亮。改用 alphaTest 剔除边缘像素，可以让圆点保持深度关系，视觉上更接近实体点。

加色混合会累积亮度。AdditiveBlending 下几十个点重叠时，局部会直接变成纯白，丢失密度层次。需要表达密度时改用普通混合，或用颜色强度编码密度。

引用本文

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