Three.js将画布上的三维顶点转换为二维点

我想把一个3D点（一个面的顶点）转换成2D画布，这样我可以移动一点到它上面。 我正在使用搜索答案时发现的以下函数，但它不起作用。它总是显示屏幕中间的点…

            function toScreenXY( position, camera ) {
            var vector = new THREE.Vector3();
            var projector = new THREE.Projector();
            projector.projectVector( position , camera );
            var halfWidth = widthHalf =window.innerWidth / 2;
            var halfHeight = heightHalf = window.innerHeight / 2;

            vector.x = ( vector.x * widthHalf ) + widthHalf;
            vector.y = - ( vector.y * heightHalf ) + heightHalf; 


            return {
                 x: vector.x,
                 y: vector.y
            };


         }

该位置是面上的顶点。我还尝试先使用以下方法进行转换：

v.setFromMatrixPosition( match.object.matrixWorld );

这是我从中获取面的几何体（如果重要的话）

我还旋转了

平面.rotation.x=-Math.PI/2

JSFIDDLE for testing:
对于初学者来说，似乎没有为vector.x或.y赋值。在向其添加半宽度之前，请尝试更改

        projector.projectVector( position , camera );

到

在本教程中搜索“projectVector”：


希望这能给你足够的时间来修补它，尽管我认为它还不能完全解决它…
我正在使用那个教程。。。是的，你的回答解决了这个问题：）
        projector.projectVector( position , camera );

        vector = projector.projectVector( position , camera );