Cesium: View from the front of the tracked entity

Question

I need to achieve a front view for the tracking entity, which will change according to the entities movements.

When I assign a value to viewer.trackedEntity property, the camera assumes a certain position. Is it possible to change this position so that the camera is directly in front of the tracking entity?

How can I do this for this example?

var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, 
    selectionIndicator: false,
    shouldAnimate: true, 
    terrainProvider: Cesium.createWorldTerrain()
});

var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 10;

viewer.timeline.zoomTo(start, stop);

var position = new Cesium.SampledPositionProperty();
position.addSample(start, Cesium.Cartesian3.fromDegrees(-118.243683, 34.052235, 500000));
position.addSample(Cesium.JulianDate.addSeconds(start, 250, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-110, 35.5, 500000));
position.addSample(Cesium.JulianDate.addSeconds(start, 500, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-86.134903, 40.267193, 500000));

var entity = viewer.entities.add({
    availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start : start,
        stop : stop
    })]),
    position : position,
    orientation : new Cesium.VelocityOrientationProperty(position),
    model : {
        uri : 'https://cesiumjs.org/Cesium/Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    },
    path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.1,
            color : Cesium.Color.YELLOW
        }),
        width : 10
    }
});

viewer.trackedEntity = entity;

<link href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<script src="https://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>

<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
    <div id="interpolationMenu"></div>
</div>

Mckenna

Hello Ollazarev, could you mark the answer as positive so that we can have this question tag as resolved? – Rub

Answer 1

When adding entities to a Cesium.Viewer you have one attribute in the entity, viewFrom, so by doing something like:

var entity = viewer.entities.add({
    availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start : start,
        stop : stop
    })]),
    position : position,
    orientation : new Cesium.VelocityOrientationProperty(position),
    model : {
        uri : 
'https://cesiumjs.org/Cesium/Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    },
    path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.1,
            color : Cesium.Color.YELLOW
        }),
        width : 10
    },
    viewFrom: new Cesium.Cartesian3(30, 0, 0),
});

You could get the effect that you want, observe that the viewFrom is a Cartesian3 object, so if you want a frontal view where the plane YZ is visible, you should only set distance in the X axis. Disclaimer: As pointed out in the comments, this is a East-North-Up so XYZ depend on the orientation of the vehicle itself.

Must confess that the documentation for this is quite poor and there was even a bug about this behaviour.

But after a long discussion in their forum you could discover how it works

Rub

This answer is correct as far as I know. But, viewFrom is defined in East-North-Up frame, so the correct vector to supply here depends on the vehicle's orientation. The Cesium camera doesn't follow the entity in its body frame, so won't rotate with the entity. In theory one could fork the EntityView class and make a modified version that uses entity orientation, but that could turn into a large project, outside the scope of an SO answer. – Salaidh

true, you are totally right. Another option is to use the option lookAt, but I am afraid the result is the same... But let's see if with this the OP can have some guide lines – Rub