Three.js粒子系统全局坐标转局部坐标异常问题排查

我用Three.js的Points实现粒子系统，粒子采用全局坐标（position和velocity均为Vector3）更新几何体，当Points对象静态时运行正常。现在需要将Points设为“粒子发射器”的子对象随场景移动，因此要把粒子全局坐标转换为Points对象几何体的局部坐标，但尝试的两种转换方式都出现异常，下面分别分析原因：

一、applyMatrix4(matrixWorld.invert()) 导致粒子重复（旋转至π时重合） #

使用的代码：

local = globalParticle.position.clone().applyMatrix4( movingPointsObject.matrixWorld.invert() );

异常原因 #

Three.js中的matrixWorld（世界矩阵）不会自动实时更新，只有在调用renderer.render()或者手动执行object.updateMatrixWorld(true)后，对象的世界矩阵才会同步当前帧最新的位置、旋转、缩放变换。

在你的代码逻辑中，每次动画帧先修改了cube的位置和旋转，随后立刻获取points的matrixWorld，此时matrixWorld还是上一帧的旧值。用旧的逆矩阵转换坐标，会导致全局坐标转局部坐标的计算错误，当Z轴旋转到π时，错误的转换逻辑会让粒子位置出现重合重复的现象。

修复方案 #

在获取matrixWorld之前，手动调用父对象的updateMatrixWorld(true)（子对象的世界矩阵会被递归更新），确保使用的是当前帧的最新矩阵：

cube.updateMatrixWorld(true); // 先更新发射器及子对象的世界矩阵
vertex = p.position.clone().applyMatrix4( points.matrixWorld.invert() );

二、worldToLocal() 导致粒子快速旋转（呈现环形效果） #

使用的代码：

local = movingPointsObject.worldToLocal( globalParticle.position );

异常原因 #

1. 直接修改了粒子的全局坐标：worldToLocal()方法会直接修改传入的Vector3对象，你代码中直接传入p.position，会把粒子的全局坐标改成局部坐标，导致后续帧的位置计算完全错误。
2. 坐标转换逻辑冗余：粒子的velocity是基于发射器的旋转计算的全局方向，而Points作为发射器的子对象本身会跟着旋转。此时把已经包含发射器旋转的粒子全局坐标，再通过worldToLocal()反向转换一次，相当于给粒子叠加了额外的旋转偏移，最终表现为快速旋转的环形效果。

修复方案 #

先克隆粒子的全局坐标再传入worldToLocal()，避免修改原全局坐标：

vertex = points.worldToLocal( p.position.clone() ); // 克隆后再转换

修正后的核心代码片段 #

function animate(ms) {
  // ... 其他逻辑不变

  let v = [];
  for (let p of particles) {
    p.position.add(p.velocity.clone().multiplyScalar(dt));

    let vertex;
    if (global) {
      vertex = p.position;
    } else {
      // 方法一修复版
      cube.updateMatrixWorld(true);
      // vertex = p.position.clone().applyMatrix4( points.matrixWorld.invert() );

      // 方法二修复版
      vertex = points.worldToLocal( p.position.clone() );
    }
    v.push(vertex.x, vertex.y, vertex.z);
  }
  // 优化：复用原attribute，提升性能
  if (!pgeometry.attributes.position) {
    pgeometry.setAttribute("position", new THREE.Float32BufferAttribute(v, 3));
  } else {
    pgeometry.attributes.position.setArray(v);
    pgeometry.attributes.position.needsUpdate = true;
  }

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

额外优化建议 #

• 不要每帧创建新的Float32BufferAttribute，复用已有属性并标记needsUpdate = true，能大幅提升性能。
• 粒子的velocity可以在创建时就计算好全局方向，无需重复执行applyEuler，减少冗余计算。

内容的提问来源于Stack Exchange，提问作者handle：匿名