Chase cam

CesiumJS
1

Hi,

Is it possible to set the camera view to be locked behind the aircraft, in essence a chase cam?

I’m using the 3D Models sandcastle and I’m aiming to have the camera locked in this position:

Thank you,

Fidel

2

Hey,

We don’t have direct support for a follow-cam right now, but you can right one yourself by updating camera position whenever the model moves. See the camera tutorial for some help: http://cesiumjs.org/tutorials/Camera-Tutorial/

Best,

  • Rachel
3

Fidel,

Here’s an example that does exactly what you want: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=1c5e7894a4da621935504540bb8aef40

The chase cam set up is at the bottom, I’ve re-pasted the relevant bits below. Basically, you need to get the position and orientation of the entity, create a transform model matrix out of that, and then apply it to the camera where the offset is in reference to the object (negative X is behind, positive Y rotates right, and positive Z is above). We should probably have a chase cam example in Sandcastle.

//Set up chase camera

var matrix3Scratch = new Cesium.Matrix3();

var positionScratch = new Cesium.Cartesian3();

var orientationScratch = new Cesium.Quaternion();

function getModelMatrix(entity, time, result) {

var position = Cesium.Property.getValueOrUndefined(entity.position, time, positionScratch);

if (!Cesium.defined(position)) {

return undefined;

}

var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, orientationScratch);

if (!Cesium.defined(orientation)) {

result = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, result);

} else {

result = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, matrix3Scratch), position, result);

}

return result;

}

var scratch = new Cesium.Matrix4();

var camera = viewer.scene.camera;

viewer.scene.preRender.addEventListener(function(){

getModelMatrix(entity, viewer.clock.currentTime, scratch);

camera.lookAtTransform(scratch, new Cesium.Cartesian3(-50, 0, 10));

});

Hope that helps,

Matt

4

Thanks so much Matt, that looks perfect

5

Also, we’re currently working on a drone racing game that uses a follow cam! The code isn’t quite ready to be shared, but we plan on incorporating our trailing camera mode into core Cesium once we’ve cleaned up a bit. We’ll keep you updated. :slight_smile:

For now, check it out here: http://cesiumjs.org/2017/04/18/Arcade-Game-Update/

6

That is superb. It worked perfectly. Thank you so much

7

Hi Fidel,

Just wanted to let you know, we’ve opened an issue for a follow camera. I can’t make any promises about when we’ll get our work merged into Cesium, but know that it’s in active development and we’ll keep you updated. Here’s the issue.

https://github.com/AnalyticalGraphicsInc/cesium/issues/5241

Best,

  • Rachel
8

Hi Matt,

I have some questions about camera control. Why the camera’s posture needs three directions, direction/up/right. According to my understanding, the two directions to determine the camera posture should be completely enough, the third direction can be calculated according to the other two. Why i only set the two directions did not achieve the effect?

viewer.clock.onTick.addEventListener(function(clock) {

var camera = viewer.camera;

var tempP = temp_entity.position.getValueInReferenceFrame(clock.currentTime, Cesium.ReferenceFrame.FIXED);

var tempMatrix3 = new Cesium.Matrix3.fromQuaternion(temp_entity.orientation.getValue(clock.currentTime));

var testDirection = new Cesium.Cartesian3(1.0 , 0.0, 0.0);

var upDirection = new Cesium.Cartesian3(0.0 , 0.0, 1);

Cesium.Matrix3.multiplyByVector(tempMatrix3, testDirection, testDirection);

Cesium.Matrix3.multiplyByVector(tempMatrix3, upDirection, upDirection);

var modelMatrix = Cesium.Matrix4.fromRotationTranslation(tempMatrix3,tempP);;

getModelMatrix(temp_entity, viewer.clock.currentTime, scratch);

console.log("------------------------start");

console.log(model.modelMatrix);

console.log(scratch);

console.log(model.modelMatrix.equals(scratch)); //is true

console.log("------------------------end");

//way 1

camera.lookAtTransform(model.modelMatrix, new Cesium.Cartesian3(-10, 0, 2));

//way 2

camera.position = tempP.clone();

camera.direction = testDirection.clone();

camera.up = upDirection.clone();

});

``

Way1 is normal. But way2 is somewhat weird. https://groups.google.com/forum/embed/?place=forum%2Fcesium-dev&showsearch=true&showpopout=true&hideforumtitle=true&fragments=true&parenturl=http%3A%2F%2Fcesiumjs.org%2Fforum.html#!topic/cesium-dev/tGeRe4c9yG4 if i add the camera.up will work. When the two directions are set in Cesium.camera, the third direction is not automatically updated? Causing this third direction to interfere with the camera’s posture. This is just my guess, is it so?

Xuncanzhe

在 2017年4月15日星期六 UTC+8上午8:30:42，Matthew Amato写道：

9

Hi Xuncanzhe,

It’s true that you can compute the third direction from the first two, but our camera implementation requires you to provide three orthonormal vectors. Fortunately, as you point out, the computation isn’t difficult! Just take the cross product of the first two (and make sure all vectors are normalized).

Hope that helps,

  • Rachel