Question

我想将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/

Answer 1

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

        projector.projectVector( position , camera );

到

        vector = projector.projectVector( position , camera );

在本教程中搜索＆＃34; projectVector＆＃34;：

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

希望这能让你足够修补它，虽然我认为它还没有解决它...

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

1 个答案: