Three.js 将画布上的 3D 顶点转换为 2D 点答案

【问题标题】：Three.js converting 3D vertex to 2D point on the canvasThree.js 将画布上的 3D 顶点转换为 2D 点
【发布时间】：2014-09-17 05:33:46
【问题描述】：

我想将一个 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 );

这是我得到面的几何形状（如果重要的话）

var pgeo = new THREE.PlaneGeometry( 16384/1,16384/1,127,127 );

我还旋转了plane.rotation.x = - Math.PI / 2;

用于测试的 JSFIDDLE：http://jsfiddle.net/waf6u7xp/10/

【问题讨论】：

标签： three.js

【解决方案1】：

对于初学者来说，看起来您在添加半角之前没有为 vector.x 或 .y 赋值，请尝试更改

        projector.projectVector( position , camera );

到

        vector = projector.projectVector( position , camera );

在本教程中搜索“projectVector”：

http://zachberry.com/blog/tracking-3d-objects-in-2d-with-three-js/

希望这能让你有足够的时间来修补它，尽管我认为它还没有完全解决它......

【讨论】：

我正在使用该教程...是的，您的回答解决了它:)