三.js边界框对齐错误

Posted 2023-03-23

【中文标题】三.js边界框对齐错误

【英文标题】：Three.js bounding box wrong alignment

【发布时间】：2018-10-07 20:00:19

【问题描述】：

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

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 中，从文件中读取的点被推送到粒子系统中。我在这个函数的末尾添加了上面的代码。边界框确实出现了，但对齐错误。

【问题讨论】：

渲染的点可能与内存中的点不同，着色器可能正在进行额外的转换。没有足够的代码来说明发生了什么。

请看我的编辑。

哇，那是相当多的代码。在下降三分之一的地方，我看到了一个THREE.ShaderMaterial 的实例，它带有一个包含一些逻辑的顶点着色器。如果使用它，那么它错位是有道理的。

但是着色器的东西不在我提到的那个方法中。那么它还会影响边界框对齐吗？请原谅我的基本问题。我对 Js 和 three.js 都很陌生。

我无法查看所有代码，您必须创建一个***.com/help/mcve，但我可以 99% 肯定地说这是正在发生的事情。尝试按照我在答案中建议的方式进行调试。

【参考方案1】：

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

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

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