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', {
shadow:false,
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);
viewer.scene.camera.setView({
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,
//twist:15,
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;
scene.camera.viewBoundingSphere(bs);
scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
});
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.