hprInCesium - 在cesium中实现HPR

在cesium中实现HPR

主要参考例子：

https://sandcastle.cesium.com/index.html?src=HeadingPitchRoll.html

上述例子中的第一人称视角处理有纰漏，改进后的效果和实现的代码如下：

        let canvas = viewer.canvas;
        canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
        canvas.addEventListener("click", function () {
            canvas.focus();
        });
        canvas.focus();

        let scene = viewer.scene;

        let pathPosition = new SampledPositionProperty();
        this.planePath = viewer.entities.add({
            id: "keyboardDemoPlanePath",
            position: pathPosition,
            // name: "path",
            path: {
                show: true,
                leadTime: 0,
                trailTime: 60,
                width: 10,
                resolution: 1,
                material: new PolylineGlowMaterialProperty({
                    glowPower: 0.3,
                    taperPower: 0.3,
                    color: Color.PALEGOLDENROD
                })
            }
        });

        let camera = viewer.camera;
        let controller = scene.screenSpaceCameraController;
        let r = 0;
        let center = new Cartesian3();

        let hpRoll = new HeadingPitchRoll();
        let hpRange = new HeadingPitchRange();
        let speed = 1;
        let deltaRadians = _Math.toRadians(3.0);

        let position = Cartesian3.fromDegrees(
            114.4152843,
            30.512368,
            5000.0
        );
        let speedVector = new Cartesian3();
        let fixedFrameTransform = Transforms.localFrameToFixedFrameGenerator(
            "north",
            "west"
        );

        let planePrimitive = scene.primitives.add(
            Model.fromGltf({
                url: `${webSetting.assetsUrl}/map/su30.gltf`,
                // url: `${webSetting.assetsUrl}/map/apaqi_x-90_y180.glb`,
                modelMatrix: Transforms.headingPitchRollToFixedFrame(
                    position,
                    hpRoll,
                    Ellipsoid.WGS84,
                    fixedFrameTransform
                ),
                minimumPixelSize: 256
            })
        );
        this.plane = planePrimitive;

        planePrimitive.readyPromise.then(function (model) {
            // Play and loop all animations at half-speed
            model.activeAnimations.addAll({
                multiplier: 0.5,
                loop: ModelAnimationLoop.REPEAT
            });

            // Zoom to model
            r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
            controller.minimumZoomDistance = r * 0.5;
            Matrix4.multiplyByPoint(
                model.modelMatrix,
                model.boundingSphere.center,
                center
            );
            let heading = _Math.toRadians(230.0);
            let pitch = _Math.toRadians(-20.0);
            hpRange.heading = heading;
            hpRange.pitch = pitch;
            hpRange.range = r * 50.0;
            camera.lookAt(center, hpRange);
        });

        this.keyBoardListener = function (e) {
            switch (e.keyCode) {
                case 40:
                    if (e.shiftKey) {
                        // speed down
                        speed -= 10;
                        speed = Math.max(speed, 1);
                    } else {
                        // pitch down
                        hpRoll.pitch -= deltaRadians;
                        if (hpRoll.pitch < -_Math.TWO_PI) {
                            hpRoll.pitch += _Math.TWO_PI;
                        }
                    }
                    break;
                case 38:
                    if (e.shiftKey) {
                        // speed up
                        speed += 10;
                        speed = Math.min(speed, 1000);
                    } else {
                        // pitch up
                        hpRoll.pitch += deltaRadians;
                        if (hpRoll.pitch > _Math.TWO_PI) {
                            hpRoll.pitch -= _Math.TWO_PI;
                        }
                    }
                    break;
                case 39:
                    if (e.shiftKey) {
                        // roll right
                        hpRoll.roll += deltaRadians;
                        if (hpRoll.roll > _Math.TWO_PI) {
                            hpRoll.roll -= _Math.TWO_PI;
                        }
                    } else {
                        // turn right
                        hpRoll.heading += deltaRadians;
                        if (hpRoll.heading > _Math.TWO_PI) {
                            hpRoll.heading -= _Math.TWO_PI;
                        }
                    }
                    break;
                case 37:
                    if (e.shiftKey) {
                        // roll left until
                        hpRoll.roll -= deltaRadians;
                        if (hpRoll.roll < 0.0) {
                            hpRoll.roll += _Math.TWO_PI;
                        }
                    } else {
                        // turn left
                        hpRoll.heading -= deltaRadians;
                        if (hpRoll.heading < 0.0) {
                            hpRoll.heading += _Math.TWO_PI;
                        }
                    }
                    break;
                default:
                    break;
            }
        };
        document.addEventListener("keydown", this.keyBoardListener);

        let headingSpan = document.getElementById("heading");
        let pitchSpan = document.getElementById("pitch");
        let rollSpan = document.getElementById("roll");
        let speedSpan = document.getElementById("speed");
        let fromBehind = document.getElementById("fromBehind");

        this.preUpateSpeedViewFunc = (scene, time) => {
            speedVector = Cartesian3.multiplyByScalar(
                Cartesian3.UNIT_X,
                speed / 10,
                speedVector
            );

            // let lastPosition = position.clone();
            position = Matrix4.multiplyByPoint(
                planePrimitive.modelMatrix,
                speedVector,
                position
            );
            this.center = position;


            // pathPosition.addSample(JulianDate.now(), position);
            pathPosition.addSample(time, position);
            // console.log("adding: t->p: ", JulianDate.now().toString(), " -> ",position.toString());
            Transforms.headingPitchRollToFixedFrame(
                position,
                hpRoll,
                Ellipsoid.WGS84,
                fixedFrameTransform,
                planePrimitive.modelMatrix
            );
            
            // view at fisrt player 
            if (this.fpsFlag) {
                // Zoom to model
                Matrix4.multiplyByPoint(
                    planePrimitive.modelMatrix,
                    planePrimitive.boundingSphere.center,
                    center
                );

                hpRange.heading = hpRoll.heading;
                hpRange.pitch = hpRoll.pitch;
                hpRange.range =  camera.frustum.near * 0.05;
                // mainly using this to set the camera position relatively to the plane
                camera.lookAt(center, hpRange);
                camera.moveForward(8.2);
                camera.moveLeft(2.65);
                camera.moveUp(0.7);
                // console.log("cur camera hpr is: ",camera.heading, " ", camera.pitch, " ", camera.roll,
                // "hpRoll's hpr is ", hpRoll.heading, " ", hpRoll.pitch, " ", hpRoll.roll, " ");
                
                // set the hpr according to the hpr of the plane
                camera.setView({
                    orientation: {
                        heading : hpRoll.heading, // east, default value is 0.0 (north)
                        pitch : hpRoll.pitch,    // default value (looking down)
                        roll : hpRoll.roll                             // default value
                    }
                });
            }
        };
        viewer.scene.preUpdate.addEventListener(this.preUpateSpeedViewFunc, this);

        this.preUpateHPRFunc = (scene, time) => {
            this.headingShow = _Math.toDegrees(hpRoll.heading).toFixed(2);

            this.pitchShow = _Math.toDegrees(hpRoll.pitch).toFixed(2);
            this.rollShow = _Math.toDegrees(hpRoll.roll).toFixed(2);
            this.speedShow = speed.toFixed(2);

            let tmp = Cartographic.fromCartesian(this.center, Ellipsoid.WGS84);
            this.planeLon = tmp.longitude.toFixed(2);
            this.planeLat = tmp.latitude.toFixed(2);
            this.planeHei = tmp.height.toFixed(2);

            // headingSpan.innerHTML = _Math.toDegrees(hpRoll.heading).toFixed(
            //     1
            // );
            // pitchSpan.innerHTML = _Math.toDegrees(hpRoll.pitch).toFixed(1);
            // rollSpan.innerHTML = _Math.toDegrees(hpRoll.roll).toFixed(1);
            // speedSpan.innerHTML = speed.toFixed(1);
        };
        viewer.scene.preRender.addEventListener(this.preUpateHPRFunc, this);
    });
}