Search code examples
three.jsbounding-boxparticle-system

Three.js bounding box wrong alignment

In my program, I add points to a particle system and then calculate bounding box for it as:

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

geometry is instance of BufferGeometry and it contains all the points constituting particle system.

What I see is that bounding box is wrongly aligned. Its in direction perpendicular to expected direction.

enter image description here

So I expect wireframe structure to envelop the point cloud.

Do I need to do something extra here?

Edit:

Code I am working upon is in github repo: github file

In function ParticleSystemBatcher.prototype.push, points read from a file are pushed in particle system.I have added code above at end of this function. Bounding box does appear,but aligned wrongly.

Solution

  • You have a THREE.ShaderMaterial which applies some logic to positioning these vertices. Hence, the result rendered is different than the result stored in the main memory.

    You can debug this by making a Mesh or sprite, and positioning each where you expect the particle in the system to be using just rhe scene graph (object.position.set()). The result will be a bunch of dots that are not in the same space as your particle system. These will also fit the bounding box.

    The solution is to apply the same transformation that is being applied by the shader.