This is my full code

```
handler.setInputAction(async movement => {
let position;
let cartographic;
let ray = camera.getPickRay(movement.position);
if (ray) position = scene.globe.pick(ray, map.scene);
if (position)
cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
//World coordinates to geographic coordinates(radian)
if (cartographic) {
//Geographic coordinates(radians) to latitude and longitude coordinates
let lon = Cesium.Math.toDegrees(cartographic.longitude);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let heading = turf.bearing(
turf.point([lon, lat]),
turf.point([midpoint.longitude, midpoint.latitude])
);
var positions = [cartographic];
let res = await Cesium.sampleTerrainMostDetailed(terrainProvider, [
positions
]);
res[0][0].height += 30;
let point = Cesium.Cartographic.toCartesian(res[0][0]);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
Cesium.Math.toRadians(heading),
Cesium.Math.toRadians(30),
0.0
);
//change camera view to new location
camera.flyTo({
destination: point,
orientation: initialOrientation,
endTransform: Cesium.Matrix4.IDENTITY,
complete: function() {
camera.moveUp(100);
scene.requestRender();
}
});
scene.requestRender();
}
document.addEventListener(
"keydown",
async event => {
const keyName = event.key;
let viewer = this.context.viewer;
if (
keyName === "ArrowDown" ||
keyName === "ArrowUp" ||
keyName === "a" ||
keyName === "q"
) {
let cartographic = Cesium.Cartographic.fromCartesian(
viewer.camera.position
);
let goBackAngle = keyName === "ArrowDown" ? 180 : 0;
goBackAngle = keyName === "q" ? 180 : 0;
let lon = Cesium.Math.toDegrees(cartographic.longitude);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let point = turf.point([lon, lat]);
let distance = keyName === "ArrowUp" ? 0 : 0.01; //the step distance is 10 meters
let bearing =
Cesium.Math.toDegrees(scene.camera.heading) + goBackAngle;
var options = { units: "kilometers" };
let destination = turf.getCoord(
turf.destination(point, distance, bearing, options)
);
cartographic = new Cesium.Cartographic(
Cesium.Math.toRadians(destination[0]),
Cesium.Math.toRadians(destination[1]),
0.0
);
cartographic.height = scene.globe.getHeight(cartographic);
let res = await Cesium.sampleTerrainMostDetailed(terrainProvider, [
cartographic
]);
res[0].height += 30;
viewer.camera.position = Cesium.Cartographic.toCartesian(res[0]);
scene.requestRender();
return false;
}
},
false
);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
```

Where terrain is default Cesium terrain

```
let terrainProvider = new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1)
});
```

I was thinking that doing the flight in two parts can solve the initial flight, the problem is that later as you see, the user can move using the keyboard (emulating that he walks on the ground) and there also happens the same, if he moves fast he goes under the ground.

What exactly does this property do?

https://cesium.com/docs/cesiumjs-ref-doc/ScreenSpaceCameraController.html?classFilter=scree#enableCollisionDetection

If I set it to false, I can move under the ground, that’s all