Three.js 如何绘制随机点？替代现有样条挤出方案的实现咨询

Three.js 没有提供一键生成随机点的专用API，但可以基于内置原生组件快速实现需求，完全兼容你已经配置好的WebGLRenderer、PerspectiveCamera、TrackballControls等基础环境，不需要调整初始化逻辑。

基础实现步骤 #

• 直接删除现有流程中构建CatmullRomCurve3样条、通过ExtrudeGeometry挤出生成实体的代码，直接复用你已经生成的随机THREE.Vector3坐标数组，不需要重新写随机坐标生成逻辑
• 基于随机坐标数组构建可渲染的点几何体，通过BufferGeometry的方法直接关联坐标数据
• 配置点渲染材质，自定义点的尺寸、颜色、透明度、透视衰减规则
• 将生成的点对象添加到场景中，即可完成基础随机点渲染

核心参考代码：

// randomPoints 为你已有的随机Vector3坐标数组
const pointGeometry = new THREE.BufferGeometry().setFromPoints(randomPoints);
const pointMaterial = new THREE.PointsMaterial({
  size: 0.1,
  color: 0xffffff,
  transparent: true,
  opacity: 0.8,
  sizeAttenuation: true // 开启透视效果，远处的点自动缩小
});
const randomPointObject = new THREE.Points(pointGeometry, pointMaterial);
scene.add(randomPointObject);

可选进阶调整 #

• 自定义点形状：默认渲染的点为正圆形，若需要方形、十字形或自定义图案的点，只需给PointsMaterial的map属性传入对应的透明纹理即可，不需要修改核心渲染逻辑
• 大规模渲染优化：当随机点数量达到十万甚至百万级时，将普通BufferGeometry替换为InstancedBufferGeometry做批量实例化渲染，可避免页面出现渲染卡顿
• 动态点位更新：若需要实时新增随机点、或实现点位移动动画，直接修改几何体position属性的数值，设置positionAttribute.needsUpdate = true即可触发画面刷新，不需要重新构建整个几何体
• 光照适配：现有场景中的灯光默认不会影响PointsMaterial的渲染效果，若需要点的颜色随灯光变化，可替换为ShaderMaterial或PointsNodeMaterial实现对应的光照计算逻辑

内容的提问来源于stack exchange，提问作者Anna_B