javascript - 将 3d 坐标转换为 2d 屏幕坐标(平面网格)

Question

您好，我在 Three.js 中有一个宽度为 5000、高度为 5000 的平面。使用以下代码，我将 3D 坐标转换为 2D，更具体地说，我得到了平面的左上角点和右下角点。我使用位置 x: 0、y: 0、z: 70000 和旋转 x:0,y:0,z:0 初始化相机。

如果我不旋转相机(使用轨道控制)，我得到的坐标是正确的:

但是，如果我旋转相机，坐标就不正确，我不明白为什么。这是到目前为止我的代码:

var vec3 = new THREE.Vector3();
    vec3.set( _that.model.position.x - 2500, _that.model.position.y + 2500, _that.model.position.z ); // top left corner
    vec3.project( _that.vise.camera );

var percX = Math.abs(vec3.x + 1) / 2;
var percY = Math.abs(-vec3.y + 1) / 2;

this.topLeft = {
    x : percX * _that.vise.options.generic.container.clientWidth,
    y : percY * _that.vise.options.generic.container.clientHeight
}

var vec4 = new THREE.Vector3();
    vec4.set( _that.model.position.x + 2500, _that.model.position.y - 2500, _that.model.position.z ); // top left corner
    vec4.project( _that.vise.camera );

var percX = Math.abs(vec4.x + 1) / 2;
var percY = Math.abs(-vec4.y + 1) / 2;

this.bottomRight = {
    x : percX * _that.vise.options.generic.container.clientWidth,
    y : percY * _that.vise.options.generic.container.clientHeight
}

this.projectedVector = {
    x : Math.abs(this.topLeft.x - this.bottomRight.x),
    y : Math.abs(this.topLeft.y - this.bottomRight.y)
}

Answer 1

看看这个:

http://www.threejsgames.com/extensions/#threex.objcoord

它包括 3D 到屏幕位置的转换，这是您想要的吗？