Three.js:将3d位置转换为2d屏幕位置 [英] Three.js: converting 3d position to 2d screen position
问题描述
我有一个位置为(x,y,z)的3D对象。如何计算该对象的屏幕位置(x,y)?
I have a 3D object with the position(x,y,z). How can I calculate the screen position(x,y) of that object?
我已经搜索过它,一个解决方案是我必须找出投影矩阵然后通过该矩阵乘以3D位置点以将其投影到某个2D观察表面(计算机屏幕)上。但是我不知道如何在Three.js中找到这个矩阵。
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.
我尝试这样的转换函数,但结果不正确
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};
}
提前感谢。
推荐答案
我最后通过这段代码完成了这项工作:
I make it done by this code at last:
注意:div参数= canvas dom element。
Note: div parameter = canvas dom element.
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;
}
这篇关于Three.js:将3d位置转换为2d屏幕位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!