转换世界坐标中使用投影Three.js到屏幕坐标 [英] Converting World coordinates to Screen coordinates in Three.js using Projection

问题描述

有几个优秀的堆栈问题（ 1 ，的2 ）约unprojecting在Three.js，那就是如何将（X，Y）鼠标在浏览器中的（X，Y，Z）坐标中Three.js画布空间坐标。他们大多遵循这个模式：

There are several excellent stack questions (1, 2) about unprojecting in Three.js, that is how to convert (x,y) mouse coordinates in the browser to the (x,y,z) coordinates in Three.js canvas space. Mostly they follow this pattern:

    var elem = renderer.domElement, 
        boundingRect = elem.getBoundingClientRect(),
        x = (event.clientX - boundingRect.left) * (elem.width / boundingRect.width),
        y = (event.clientY - boundingRect.top) * (elem.height / boundingRect.height);

    var vector = new THREE.Vector3( 
        ( x / WIDTH ) * 2 - 1, 
        - ( y / HEIGHT ) * 2 + 1, 
        0.5 
    );

    projector.unprojectVector( vector, camera );
    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
    var intersects = ray.intersectObjects( scene.children );

我一直在试图做相反 - 而不是从屏世界的空间去，从走的世界筛选的空间。如果我知道Three.js对象的位置，如何确定其在屏幕上的位置？

I have been attempting to do the reverse - instead of going from "screen to world" space, to go from "world to screen" space. If I know the position of the object in Three.js, how do I determine its position on the screen?

似乎有不成为任何公布的解决这个问题。 <一href="http://stackoverflow.com/questions/11534000/three-js-converting-3d-position-to-2d-screen-position">Another关于这个问题，只是表现出了对堆栈，但作者声称已与不工作对我来说是功能解决了这个问题。他们的解决方案不使用投影的光线，我pretty的肯定，因为2D转3D技术，采用unprojectVector（），该3D到2D的解决方案将需要projectVector（）。

There does not seem to be any published solution to this problem. Another question about this just showed up on Stack, but the author claims to have solved the problem with a function that is not working for me. Their solution does not use a projected Ray, and I am pretty sure that since 2D to 3D uses unprojectVector(), that the 3D to 2D solution will require projectVector().

还有这个问题打开Github上。

There is also this issue opened on Github.

任何帮助是AP preciated。

Any help is appreciated.

推荐答案

试试这个：

var width = 640, height = 480;
var widthHalf = width / 2, heightHalf = height / 2;

var vector = new THREE.Vector3();
var projector = new THREE.Projector();
projector.projectVector( vector.setFromMatrixPosition( object.matrixWorld ), camera );

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

这篇关于转换世界坐标中使用投影Three.js到屏幕坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！