Three.js

Question

我需要在没有相机的情况下计算三之外的屏幕位置。

我知道物体位置、相机位置和相机目标

我看过很多说明，例如

vector.project(camera);
vector.x = Math.round( (   vector.x + 1 ) * w / 2 );
vector.y = Math.round( ( - vector.y + 1 ) * h / 2 );

我了解 Vector.project 相机会考虑我假设的相机设置、FOV 等？

Vector3 有 projectOnVector()，这和 vector3.project(camera) 做同样的事情吗？

有没有办法在无法访问相机的情况下计算对象在屏幕上的位置？

Answer 1

是的，Vector3.project 考虑了相机设置...

当您尝试将位置从世界 space 转换为视图 space 时，您需要计算投影矩阵。这是一个很棒的小动画，描述了这一点的旅程：https://jsantell.com/model-view-projection/mvp.webm (lifted from this useful page: https://jsantell.com/model-view-projection/)。

如果您查看这三个源代码，它将向您展示执行此操作所需的一切。 Vector3.project 只是应用来自相机的两个矩阵：

return this.applyMatrix4( camera.matrixWorldInverse ).applyMatrix4( camera.projectionMatrix );

那么如何得到这些矩阵呢？生成项目矩阵here.

您可以忽略视图、倾斜和缩放，因此您只需要近距离、远距离、纵横比和视野。

updateProjectionMatrix() {

    const near = this.near;
    let top = near * Math.tan( MathUtils.DEG2RAD * 0.5 * this.fov );
    let height = 2 * top;
    let width = this.aspect * height;
    let left = - 0.5 * width;

    this.projectionMatrix.makePerspective( left, left + width, top, top - height, near, this.far );
}

如果你需要 makePerspective 就是 here

matrixWorldInverse 就是...取你的世界矩阵并将其求逆。 Three.js 做到了 here.

这为您提供了视图矩阵。所以，视图矩阵乘以投影给你屏幕 space 位置......就像在着色器中一样，即：

gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); 我假设您的观点是在世界 space 中，因此您可以忽略模型部分，因为这只是将您从模型带到世界。

Three.js - 在没有相机的情况下获取屏幕位置

Three.js - get screen position with no camera

math

3d