Search code examples
javascriptthree.jsgeometryspriteparticle-system

What is this particle system position bug?


This particle cloud of sprites should sit to the right of the x-axis and above the y-axis. However, as you can see in this fiddle it mystifyingly hangs just below the y-axis and despite all my editing and rearranging and can't figure out what's going on here. I'd appreciate a fresh pair of eyes to help me out. Thanks!

Here is the basis for my math in the elliptical cloud.

function pointInEllipticalCloud(radiusA, radiusB, pZ) {
    var pX = Math.random() * (radiusA * 2);
    var rightBisector = Math.abs( radiusA - pX );
    var chord = (2 * radiusB) * Math.sqrt(1 - Math.pow((rightBisector / radiusA), 2));
    var pY = (Math.random() * chord) + ((radiusB - chord) / 2);
    return new THREE.Vector3(pX, pY, pZ);
}

var pZ = 1;
var particleGroup = new THREE.Object3D();
for( var i = 0; i < 300; i++ ) {
    var radiusA = 200;
    var radiusB = 50;
    var particle = new THREE.Sprite( spriteMaterial );
    particle.scale.set( 20, 20, 1 );

    var spritePoint = pointInEllipticalCloud(radiusA, radiusB, pZ);
    // *** Why the resulting form hanging below the y axis?

    particle.position = spritePoint ;
    particleGroup.add( particle );
    pZ += 0.1;
}

particleGroup.position.set(0,0,0);
scene.add( particleGroup );

Solution

  • Ah! Found it. The bug was in part of the calculation for pointInEllipticalCloud(). pY should instead equal this:

    var pY = (Math.random() * chord) + (((radiusB * 2) - chord) / 2);
    

    ...where radiusB is multiplied by two to make it the vertical diameter of the ellipse.