Look at position from another position

CesiumJS
1

Hey,

i have a question about the camera, because i cant find any solution :confused:

I have two Cartesian3 positions, one for the eye/camera and one for the object i want to look at.

But i cant find any function to set the camera, lookAt(eye, target, up) did not work and is deprecated.

Can anyone tell me how to do this ? :confused:

Thanks

2

Method lookAt(target, offset) supports a Cartesian3 for the offset, I would expect that is what you need (i.e. target is the object you want to look at, offset is the camera/eye position).
See https://cesiumjs.org/Cesium/Build/Documentation/Camera.html

Regards, Willem

3

I tried this, but it isent working. The camera is up in space and looks on the target.

I think this is because the offset is relative to the target.

4

In that case you could use Cartesian3.subtract() to get the relative offset. See https://cesiumjs.org/Cesium/Build/Documentation/Cartesian3.html .

5

mhm sounds good, i will try it next week :slight_smile:

thanks

6

I’m trying to do the same thing but can’t seem to get this to work. Can someone post an example?

Thanks!

Previous Cesium Code:
var eye = …//A Cartesian3 position
var target = …//A Cartesian3 position
var normalizedEye = Cesium.Cartesian3.clone(eye);
Cesium.Cartesian3.normalize(eye,normalizedEye);
this.cesiumWidget.scene.camera.lookAt(eye, target, normalizedEye);

7

I ended up making my own lookAt function that was based on the previous Cesium function using the following code:

//This is code from the previous lookAt function of Cesium v1.5
this.cesiumWidget.scene.camera.position = Cesium.Cartesian3.clone(eye, this.cesiumWidget.scene.camera.position);
this.cesiumWidget.scene.camera.direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(target, eye, this.cesiumWidget.scene.camera.direction), this.cesiumWidget.scene.camera.direction);
this.cesiumWidget.scene.camera.right = Cesium.Cartesian3.normalize(Cesium.Cartesian3.cross(this.cesiumWidget.scene.camera.direction, up, this.cesiumWidget.scene.camera.right), this.cesiumWidget.scene.camera.right); this.cesiumWidget.scene.camera.up = Cesium.Cartesian3.cross(this.cesiumWidget.scene.camera.right, this.cesiumWidget.scene.camera.direction, this.cesiumWidget.scene.camera.up);

8

Both solutions don't realy work for me :confused:

If i use Cartesian3.subtract(), the Camera follows my object and don't stay on the eye position.

Also i tried this one:

var direction = new Cesium.Cartesian3((target.x - eye.x), (target.y - eye.y), (target.z - eye.z));
viewer.camera.position = eye;
viewer.camera.direction = direction;
viewer.camera.up = Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_Z);

but here is the problem, that the camera rolls to the left and to the right if the object flies over.

settingt the viewer.camera.roll = 0.0; does not help.

9

You could try adding lookAtTransform(Cesium.Matrix4.IDENTITY) after the lookAt() call. This is also done in the Terrain Sandcastle (http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Terrain.html&label=Showcases).
Search this forum for “lookAtTransform(Cesium.Matrix4.IDENTITY)” for background, I don’t understand it fully, but it has effect!

10

I think i already tried this, but i will check tomorrow.

But i guess my UP vector is wrong (i tried UNIT_Z and UNIT_Y) because if the target is above the eye it looks good, but if the target is on the left or right side it looks like the camera rolls only to the left and right from the position where it looks to the sky.

I hope you understand what i mean, english is not my nativ language :slight_smile:
I can send some screenshots tomorrow if i found the function to add them here.

Here is an short example for the situation:
http://www.directupload.net/file/d/4005/b5g7n6ia_png.htm

All i want to do is to follow the target from the eye position on the ground.
(I'm updating the camera ervery frame)

Thanks :slight_smile:

11

Finally i got it working...

If anyone have the same problem or some ideas to improve the code, here it is:

var sPosition = Cesium.Cartesian3.fromDegrees(station[1], station[0], station[2]);
var pPosition = viewer.dataSources.get(0).entities.getById("CesiumPlane").position.getValue(time);
       
var target = Cesium.Ellipsoid.WGS84.cartesianToCartographic(pPosition);
target.latitude = target.latitude * (180 / Math.PI);
target.longitude = target.longitude * (180 / Math.PI);

var eye = Cesium.Ellipsoid.WGS84.cartesianToCartographic(Cesium.Cartesian3.fromDegrees(station[1], station[0], station[2]));
eye.latitude = eye.latitude * (180 / Math.PI);
eye.longitude = eye.longitude * (180 / Math.PI);

var bearing = bearingDegrees(target.latitude, target.longitude, eye.latitude, eye.longitude);
bearing = (bearing-180) * (Math.PI / 180);
            
var distance = Cesium.Cartesian3.distance(sPosition, pPosition);
var diff = target.height - eye.height;
var tilt = Math.atan(diff / distance);

var camera = viewer.camera;
camera.setView({
     position: Cesium.Cartesian3.fromDegrees(station[1], station[0], station[2]),
     heading: bearing,
     pitch: tilt,
     roll: 0.0
});
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

function bearingDegrees(lat1, long1, lat2, long2) {
            var degToRad = Math.PI / 180.0;

            var phi1 = lat1 * degToRad;
            var phi2 = lat2 * degToRad;
            var lam1 = long1 * degToRad;
            var lam2 = long2 * degToRad;

            return Math.atan2(Math.sin(lam2 - lam1) * Math.cos(phi2),
                Math.cos(phi1) * Math.sin(phi2) - Math.sin(phi1) * Math.cos(phi2) * Math.cos(lam2 - lam1)
            ) * 180 / Math.PI;
        }