如何定位相机，使给定的世界坐标投影到给定的屏幕位置

Question

我希望定位相机，以便在屏幕的给定像素坐标（例如 (10, 20)）处呈现对象的中心。

物体的中心在世界坐标系中给出。 也许有人可以给我提示如何解决它。

Answer 1

如下解决

const { BoundingSphere, Cartesian2, Cartesian3, Matrix4 } = window.Cesium;

let viewer;
let center;

// from threejs Ray.closestPointToPoint
function closestPointToPoint(ray, point, target) {
    Cartesian3.subtract(point, ray.origin, target);

    const directionDistance = Cartesian3.dot(target, ray.direction);

    if (directionDistance < 0) {
        return Cartesian3.clone(ray.origin, target);
    }

    Cartesian3.clone(ray.origin, target);

    target.x += ray.direction.x * directionDistance;
    target.y += ray.direction.y * directionDistance;
    target.z += ray.direction.z * directionDistance;

    return target;
}

function setCamera(targetWorld, targetScreenPosition) {
    const camera = viewer.camera;

    camera.lookAt(targetWorld, new Cartesian3(0, 0, 10));
    camera.lookAtTransform(Matrix4.IDENTITY);

    const ray = camera.getPickRay(targetScreenPosition);

    const target = closestPointToPoint(ray, center, new Cartesian3());

    Cartesian3.subtract(target, center, target);

    const newPosition = Cartesian3.subtract(camera.position, target, new Cartesian3());

    camera.position = newPosition;
}

Sandcastle.addToolbarButton("Move left = 1 / 4", function () {
    const width = viewer._element.offsetWidth;
    const height = viewer._element.offsetHeight;

    const targetPixel = new Cartesian2(width / 4, height / 2);

    setCamera(center, targetPixel);
});

function main() {
    viewer = new Cesium.Viewer("cesiumContainer");

    center = Cartesian3.fromDegrees(-114.0, 40.0, 3.0);

    const r = new Cartesian3(1, 1, 1);

    viewer.entities.add({
        name: "Blue ellipsoid",
        position: center,
        ellipsoid: {
            radii: r,
            material: Cesium.Color.BLUE
        }
    });

    viewer.camera.flyToBoundingSphere(new BoundingSphere(center, 10));
}

main();

Answer 2

听起来您正在寻找 flyTo 方法。