To convert your worldPos vec3 to screen space, you first need to apply the viewProjection matrix and then perform the perspective divide. This will bring the coordinates to NDC space, where (-1,-1,x) represents the bottom left of the screen and (+1,+1,x) represents the upper right of the screen. Adjust these coordinates based on the screen width and height to obtain the final position in screen space.
Below is the code implementation for this process:
worldToScreen: function(viewProjectionMatrix, screenWidth, screenHeight){
var m = viewProjectionMatrix;
var w = m[3] * this[0] + m[7] * this[1] + m[11] * this[2] + m[15]; // Required for perspective divide
this.transformByMat4(viewProjectionMatrix);
if (w !== 0){ // Perform perspective divide and NDC -> screen conversion
var invW = 1.0/w;
this[0] = (this[0]*invW + 1) / 2 * screenWidth;
this[1] = (1-this[1]*invW) / 2 * screenHeight; // Screen space Y goes from top to bottom
this[2] *= invW;
}
return this;
}
Essentially, this is the process that the GPU follows to render objects. You can also check the THREE Vector3 methods for an implementation or simply use the provided code snippet.