THREE.JS粒子系统所有粒子X轴均居中显示是什么原因？

问题根源 #

你代码中的透视相机宽高比运算优先级错误是导致粒子X轴显示异常的核心原因：
PerspectiveCamera构造函数的第二个参数要求传入画布的宽高比（宽度/高度），你当前的写法没有给减法逻辑加括号，JavaScript中除法运算符优先级高于减法，实际运算逻辑为window.innerWidth - (10 / window.innerHeight)，得到的数值远大于正常的宽高比，会导致X轴方向的透视被极度压缩，最终呈现所有粒子X轴都固定在中心的效果。

另外你当前设置的粒子材质尺寸为0.1，在相机z轴位置300的场景下尺寸过小，也会影响粒子显示效果。

修复方案 #

1. 修正相机宽高比的运算顺序，给减法逻辑添加括号：

const camera = new THREE.PerspectiveCamera(
  75,
  (window.innerWidth - 10) / window.innerHeight, // 此处添加括号修正运算顺序
  1,
  1000
);

2. 可以根据需要调整粒子材质的尺寸，让粒子显示更清晰：

const particlePointsMaterial = new THREE.PointsMaterial({
  size: 2 // 可根据视觉效果调整数值
});

修改完成后重新运行即可得到预期的三维粒子分布效果。

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