Three.js 边界框对齐错误

Question

在我的程序中，我将点添加到粒子系统，然后为其计算边界框：

var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial(0xff0000));
var box = new THREE.BoxHelper( object, 0xffff00 );
scene.add(box);

geometry是BufferGeometry的实例，它包含了构成粒子系统的所有点。

我看到的是边界框对齐错误。它的方向垂直于预期方向。

所以我希望线框结构包围点云。

我需要在这里做一些额外的事情吗？

编辑：

我正在处理的代码在 github 仓库中： github file

在函数 ParticleSystemBatcher.prototype.push 中，从文件中读取的点被压入粒子 system.I 已在此函数的末尾添加了上面的代码。边界框确实出现了，但对齐错误。

Answer 1

你有一个 THREE.ShaderMaterial 应用一些逻辑来定位这些顶点。因此，呈现的结果与存储在主内存中的结果不同。

您可以通过制作一个 Mesh 或 sprite 来调试它，并使用场景图 (object.position.set()) 将每个粒子定位在您希望系统中的粒子所在的位置。结果将是一堆与您的粒子系统不在同一 space 中的点。这些也适合边界框。

解决方案是应用着色器正在应用的相同变换。

Three.js bounding box wrong alignment