This unique formation of sprite particles should be positioned to the right of the x-axis and above the y-axis. However, upon viewing this demo, you'll notice they curiously hang just below the y-axis. Despite my numerous attempts at editing and rearranging, I'm stumped as to what's causing this issue. Any fresh perspectives on the matter would be greatly appreciated. Thank you!
For those interested, the mathematical foundation behind this elliptical cloud can be found here.
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 are the resulting sprites hanging below the y axis?
particle.position = spritePoint ;
particleGroup.add( particle );
pZ += 0.1;
}
particleGroup.position.set(0,0,0);
scene.add( particleGroup );