javascript - Three.js: converting 3d position to 2d screen position

Question

I have a 3D object with the position(x,y,z). How can I calculate the screen position(x,y) of that object?

I have search for it and one solution is that I have to find out the projection matrix then multiply 3D position point by this matrix to project it onto some 2D viewing surface (computer screen). But I have no idea how to find this matrix in Three.js.

I try a convert function like this but it give incorrect result

function Point3DToScreen2D(point3D){
            var screenX = 0;
            var screenY = 0;
            var inputX = point3D.x - camera.position.x;
            var inputY = point3D.y - camera.position.y;
            var inputZ = point3D.z - camera.position.z;
            var aspectRatio = renderer.domElement.width / renderer.domElement.height;
            screenX = inputX / (-inputZ * Math.tan(camera.fov/2));
            screenY = (inputY * aspectRatio) / (-inputZ * Math.tan(camera.fov / 2));
            screenX = screenX * renderer.domElement.width;
            screenY = renderer.domElement.height * (1-screenY);
            return {x: screenX, y: screenY};
        }

Thank in advance.

Answer 1

For me this function works (Three.js version 69):

function createVector(x, y, z, camera, width, height) {
        var p = new THREE.Vector3(x, y, z);
        var vector = p.project(camera);

        vector.x = (vector.x + 1) / 2 * width;
        vector.y = -(vector.y - 1) / 2 * height;

        return vector;
    }