javascript Three.js：将3d位置转换为2d屏幕位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11534000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js: converting 3d position to 2d screen position
提问by user1533481
I have a 3D object with the position(x,y,z). How can I calculate the screen position(x,y) of that object?
我有一个位置（x，y，z）的 3D 对象。如何计算该对象的屏幕位置（x，y）？
I have search for it and one solution is that I have to find out the projection matrix then multiply 3D position point by this matrix to project it onto some 2D viewing surface (computer screen). But I have no idea how to find this matrix in Three.js.
我已经搜索过它，一个解决方案是我必须找出投影矩阵，然后将 3D 位置点乘以该矩阵以将其投影到某个 2D 观看表面（计算机屏幕）上。但我不知道如何在 Three.js 中找到这个矩阵。
I try a convert function like this but it give incorrect result
我尝试了这样的转换函数，但它给出了不正确的结果
function Point3DToScreen2D(point3D){
var screenX = 0;
var screenY = 0;
var inputX = point3D.x - camera.position.x;
var inputY = point3D.y - camera.position.y;
var inputZ = point3D.z - camera.position.z;
var aspectRatio = renderer.domElement.width / renderer.domElement.height;
screenX = inputX / (-inputZ * Math.tan(camera.fov/2));
screenY = (inputY * aspectRatio) / (-inputZ * Math.tan(camera.fov / 2));
screenX = screenX * renderer.domElement.width;
screenY = renderer.domElement.height * (1-screenY);
return {x: screenX, y: screenY};
}
Thank in advance.
预先感谢。
采纳答案by user1533481
I make it done by this code at last:
我最后通过这段代码完成了：
Note: div parameter = canvas dom element.
注意：div 参数 = canvas dom 元素。
function toScreenXY( position, camera, div ) {
var pos = position.clone();
projScreenMat = new THREE.Matrix4();
projScreenMat.multiply( camera.projectionMatrix, camera.matrixWorldInverse );
projScreenMat.multiplyVector3( pos );
var offset = findOffset(div);
return { x: ( pos.x + 1 ) * div.width / 2 + offset.left,
y: ( - pos.y + 1) * div.height / 2 + offset.top };
}
function findOffset(element) {
var pos = new Object();
pos.left = pos.top = 0;
if (element.offsetParent)
{
do
{
pos.left += element.offsetLeft;
pos.top += element.offsetTop;
} while (element = element.offsetParent);
}
return pos;
}
回答by Julia Savinkova
For me this function works (Three.js version 69):
对我来说，这个函数有效（Three.js 版本 69）：
function createVector(x, y, z, camera, width, height) {
var p = new THREE.Vector3(x, y, z);
var vector = p.project(camera);
vector.x = (vector.x + 1) / 2 * width;
vector.y = -(vector.y - 1) / 2 * height;
return vector;
}回答by Lee Stemkoski
Check out the source at the demo: http://stemkoski.github.com/Three.js/Mouse-Over.html
在演示中查看源代码：http: //stemkoski.github.com/Three.js/Mouse-Over.html
The object that I believe you are interested in is THREE.Projector(); you can use this, for example, for automating calculations that create rays from the location of mouse cursor on the screen and project it into the scene.
我相信你感兴趣的对象是 THREE.Projector(); 例如，您可以使用它来自动计算，从屏幕上鼠标光标的位置创建光线并将其投影到场景中。
