javascript - 可见区域的位置

Question

我有一个带有纹理的球形网格，并且我放置了一个透视相机来观察内部情况，因此允许我进行 360 度 View 。

this.camera = new THREE.PerspectiveCamera(this.fov, $(this.element).width() / $(this.element).height(), 0.1, 1000);
this.camera.setLens(this.fov);
this.mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 80, 50 ), new THREE.MeshBasicMaterial( { map: this.texture } ) );
this.mesh.scale.x = -1;
this.camera.lookAt(new THREE.Vector3(cx, cy, cz));
this.renderer.render( this.scene, this.camera );

我想知道如何计算观看者当前看到的网格中的 View 区域和位置，即平面的一种可视区域。

所谓可视区域，是指用户在当前状态下可以在浏览器中看到的图像纹理，类似于(0,0)(x,y)(400,500)(width,height) 如果用户移动鼠标我会得到(50,0)(x,y)(400,500)(width,height)，如果用户放大(50,40)(x,y)(300,400)(width,height)..对于宽度和高度，我已经看到使用相机 fov 的公式，但是我找不到 x,y 问题的解决方案。

Answer 1

这段代码应该能够根据相机的注视向量的 x,y,z 坐标来获取纹理内的 u,v 坐标:

    var u, v;

    // V coordinate
    if (x == 0 && z == 0)
    {
        if (y > 0)
            v = 1;
        else
            if (y < 0) v = -1;
    }
    else
    {
        v = 0.5 + Math.atan( y / Math.sqrt(x*x + z*z) ) / Math.PI;
    }

    // U coordinate
    if (z == 0)
    {
        if (x < 0)
            u = 0.5;
        if (x > 0)
            u = 0;
    }
    else
    {
        u = 0.25 - Math.atan(x/z) / (2 * Math.PI);
        if (z < 0) u += 0.5;
    }

如果您需要纹理中的精确像素位置，只需将 u 和 v 分别乘以纹理的宽度和高度即可。

请注意，当 x 和 z 都为零时，u 未定义。