I am trying to get the screen coordinates for the vertices in a particle system within three.js. I have been trying to do this using the following code from Three.js: converting 3d position to 2d screen position:
function toScreenXY( position, camera, div ) {
var pos = position.clone();
projScreenMat = new THREE.Matrix4();
projScreenMat.multiply( camera.projectionMatrix, camera.matrixWorldInverse );
projScreenMat.multiplyVector3( pos );
var offset = findOffset(div);
return {
x: ( pos.x + 1 ) * div.width / 2 + offset.left,
y: ( - pos.y + 1) * div.height / 2 + offset.top
};
}
function findOffset(element) {
var pos = new Object();
pos.left = pos.top = 0;
if (element.offsetParent)
{
do
{
pos.left += element.offsetLeft;
pos.top += element.offsetTop;
} while (element = element.offsetParent);
}
return pos;
}
I call this with the following information:
var test = toScreenXY(particleGeometry.vertices[i].clone(), camera, renderer.domElement);
However the coordinates that are returned do not match the screen coordinates.
There are other examples where this is discussed but they don't seem applicable (Converting World coordinates to Screen coordinates in Three.js using Projection) since the "object" referred to cannot be a Vector3D that defines the vertex.
What is an easy way to get the screen position of a particle in the particle system?