Want to change the position of frustum with mouse events.

1. A concise explanation of the problem you're experiencing.
Want to change the angle,position and orientation of the frustum with mouse events like mouseDrag and mouseDown. And i want add grid lines to the front face of the frustum.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()

viewer.scene.globe.depthTestAgainstTerrain = true;

// Set the initial camera view to look at Manhattan
var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
    destination: initialPosition,
    orientation: initialOrientation,

    endTransform: Cesium.Matrix4.IDENTITY

// Load the NYC buildings tileset

viewer.canvas.addEventListener('dblclick', function(e){
    var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);

    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
    if (cartesian) {
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
    var heightString = Cesium.Math.toDegrees(cartographic.height);
        var scene = viewer.scene;
var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(longitudeString, latitudeString, 50);
var enu = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid);
var rotation = Cesium.Matrix4.getRotation(enu, new Cesium.Matrix3());
Cesium.Matrix3.multiply(rotation, Cesium.Matrix3.fromRotationX(-Cesium.Math.PI_OVER_TWO), rotation);
var orientation = Cesium.Quaternion.fromRotationMatrix(rotation);
var frustum = new Cesium.PerspectiveFrustum({
    fov : Cesium.Math.toRadians(80.0),
    aspectRatio : scene.canvas.clientWidth / scene.canvas.clientHeight,
    near :0.009,
    far : 400.0
var frustumGeometry = new Cesium.FrustumGeometry({
    frustum : frustum,
    origin : positionOnEllipsoid,
    orientation : orientation,
    vertexFormat : Cesium.VertexFormat.POSITION_ONLY
var frustumGeometryInstance = new Cesium.GeometryInstance({
    geometry : frustumGeometry,
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
    id : 'frustum'
var frustumPrimitive = scene.primitives.add(new Cesium.Primitive({
    geometryInstances : frustumGeometryInstance,
    appearance : new Cesium.PerInstanceColorAppearance({
        closed: true,
        flat : true
scene.primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.FrustumOutlineGeometry({
            frustum : frustum,
            origin : positionOnEllipsoid,
            orientation : orientation
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 0.0, 0.0, 1))
    appearance : new Cesium.PerInstanceColorAppearance({
        flat : true
frustumPrimitive.readyPromise.then(function(primitive) {
    var bs = primitive.getGeometryInstanceAttributes('frustum').boundingSphere;

        console.log(longitudeString + ', ' + latitudeString + ', ' + heightString);
    } else {
        alert('Globe was not picked');
}, false);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you're using, your operating system and browser.
1.47,windows 10, Chrome.

You can update the Camera.frustum property to update the scene camera’s frustum parameters. If you want to add grid line to the frustum, I would recommend creating a custom material appearance like a GridMaterial for the frustum geometry instance.



could you share any code snippet

Have you solved this problem, please?

Sorry, my requirement changed so stopped that process and didn’t completed it.

Feel free to open a new forum thread. I think the easiest way to add a grid in front of the camera might be to literally create an entity and stick that in front of the camera. It can be a transparent grid. Here’s a code example of doing that with a regular image.

Otherwise here’s an example of adding a grid material to a small area.