How to set Frustum Geometry orientation to be the same as the Camera Orientation

agustin.johnpatrick · August 21, 2019, 6:16am

Hi all,

I am currently having a hard time setting the Frustum Geometry orientation to be the same as the Camera Orientation. Here’s a snippet of my code:

const orientation = {
heading: Cesium.Math.Radians(headingDegree),
pitch: Cesium.Math.Radians(pitchDegree),
roll: Cesium.Math.Radians(rollDegree),
}

// Camera
viewer.camera.flyTo({
destination: origin,
orientation,
})

const hpr = Cesium.HeadingPitchRoll.fromDegrees(headingDegree, pitchDegree, rollDegree)
const quaternion = Cesium.Quaternion.fromHeadingPitchRoll(hpr)

// FrustumGeometry
const frustumGeometry = new FrustumOutlineGeometry({
frustum,
origin,
orientation: quaternion
})

``

Here’s a screenshot of the result:

Screenshot from 2019-08-21 14-09-49.png

Origin is correct but the Frustum is facing a different direction. How do I set its orientation to be the same as that of the camera given the heading, pitch, roll? I hope someone can help me.

Thank you!

agustin.johnpatrick · August 22, 2019, 1:16am

Bump

omar · August 23, 2019, 8:22pm

You can extract the frustum directly from the camera here:

https://cesiumjs.org/Cesium/Build/Documentation/Camera.html?classFilter=camera#frustum

Is this what you’re passing to the geometry constructor? You might also want to look into the 3D Tiles inspector, which already has a way to visualize the camera frustum:

https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Tiles%20Inspector.html&label=All

If you click “Update” and “Freeze frame” and then zoom out you’ll see it. You can see the code that sets this up here:

github.com

CesiumGS/cesium/blob/303fced1ed4023e501853919abe2cfe44867d1d1/Source/Scene/Scene.js#L2930-L2947


function updateDebugFrustumPlanes(scene) {
    var frameState = scene._frameState;
    if (scene.debugShowFrustumPlanes !== scene._debugShowFrustumPlanes) {
        if (scene.debugShowFrustumPlanes) {
            scene._debugFrustumPlanes = new DebugCameraPrimitive({
                camera: scene.camera,
                updateOnChange: false
            });
        } else {
            scene._debugFrustumPlanes = scene._debugFrustumPlanes && scene._debugFrustumPlanes.destroy();
        }
        scene._debugShowFrustumPlanes = scene.debugShowFrustumPlanes;
    }


    if (defined(scene._debugFrustumPlanes)) {
        scene._debugFrustumPlanes.update(frameState);
    }
}

agustin.johnpatrick · September 3, 2019, 3:53am

Hi Omar,

Sorry for the late reply. Thank you for this one. Though is there a way to edit the debugFrustumPlane color?

Thanks!

omar · October 3, 2019, 6:07pm

You might need to modify the default color in the source since it’s a private class:

github.com

CesiumGS/cesium/blob/d26ccfea38dcf4623cf5da3faca141913c64cfe1/Source/Scene/DebugCameraPrimitive.js#L49


function DebugCameraPrimitive(options) {
    options = defaultValue(options, defaultValue.EMPTY_OBJECT);


    //>>includeStart('debug', pragmas.debug);
    if (!defined(options.camera)) {
        throw new DeveloperError('options.camera is required.');
    }
    //>>includeEnd('debug');


    this._camera = options.camera;
    this._color = defaultValue(options.color, Color.CYAN);
    this._updateOnChange = defaultValue(options.updateOnChange, true);


    /**
     * Determines if this primitive will be shown.
     *
     * @type Boolean
     * @default true
     */
    this.show = defaultValue(options.show, true);