Three.js 中有几个关于取消投影的优秀堆栈问题(1,2),即如何将浏览器中的 (x,y) 鼠标坐标转换为 (x,y,z) 坐标在 Three.js Canvas 空间中。他们大多遵循这种模式:
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 中的位置,我如何确定它在屏幕上的位置?
似乎没有针对此问题的任何已发布解决方案。 Another question about this just showed up on Stack ,但作者声称已经用一个对我不起作用的函数解决了这个问题。他们的解决方案不使用投影射线,而且我非常确定,由于 2D 到 3D 使用 unprojectVector(),因此 3D 到 2D 解决方案将需要 projectVector()。
还有this issue在 Github 上打开。
感谢任何帮助。
最佳答案
试试这个:
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;
关于javascript - 使用 Projection 在 Three.js 中将世界坐标转换为屏幕坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11586527/