A bit confused on camera rotation...

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

Hello, I’m new to Cesium and I’m trying ro “simply” rotate the camera around the center of the window with buttons (what you can do with CTRL+mouse click, and the basic function of every 3d map).

I can’t find any tutorial so I’ve deeped in the documentation.

I think that I should trace a ray from the camera to the center of the window, get the intersection point with the 3d terrain as Cartesian3 (the intersection point could be on a mountain, not only on flat terrain),

and use camera.lookAt(target, offset) with the intersection point as target, and the new heading/pitch of the camera.

But I’m really confused because:

  1. var ray = viewer.camera.getPickRay(windowCoordinates)

It require windowCoordinates. How can I get the center of the window?

  1. camera.lookAt(target, offset)

It require HeadingPitchRange.
How can I get the Range?

  1. I’m not sure that camera.lookAt is the right method to just modify pitch and heading and keep the same target.

Any help would be much appreciated

Thank-you

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

// find intersection of ray through a pixel and the globe

var windowCoordinates = new Cesium.Cartesian2(300, 300);

var ray = viewer.camera.getPickRay(windowCoordinates);

var intersection = Cesium.IntersectionTests.rayEllipsoid(ray, ellipsoid);

var point = Cesium.Ray.getPoint(ray, intersection.start);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I need to rotate the camera around the center point in the window of the terrain (what you can actually do clic with CTRL+mouse click on the map)

4. The Cesium version you’re using, your operating system and browser.

1.60

2

finally…
it doesn’t work.

with this code the camera should stay in place (no movement, no different heading / pitch / range, but the 1st click change the heading, and every time I click the button the camera move a little…
Moreover with lookAt I can’t pan the map anymore with mouse…

("#turnLeft").mousedown(function () { (this).css(‘opacity’, ‘1’);

/// get the size of the window
var elmnt = document.getElementById("map");
console.log(elmnt.offsetHeight);
console.log(elmnt.offsetWidth);

// find intersection of ray from camera to the center of the window
var ellipsoid = viewer.scene.mapProjection.ellipsoid;
var windowCoordinates = new Cesium.Cartesian2(elmnt.offsetHeight/2, elmnt.offsetWidth/2);
var ray = viewer.camera.getPickRay(windowCoordinates);
var intersection = Cesium.IntersectionTests.rayEllipsoid(ray, ellipsoid);
var intersectionPoint = Cesium.Ray.getPoint(ray, intersection.start);

/// get the range
var range = Cesium.Cartesian3.distance(camera.positionWC, intersectionPoint);

/// rotate the camera -- DOES NOT WORK
var heading = camera.heading;
var pitch = camera.pitch
viewer.camera.lookAt(intersectionPoint, new Cesium.HeadingPitchRange(heading, pitch, range));
3

Finally I did it.
For everybody that is struggling like me, here the code

$("#turnLeft").mousedown(function () {

$(this).css(‘opacity’, ‘1’);

if (timer != null) {

clearInterval(timer);

timer = null;

return false;

}

/// get the size of the window

var elmnt = document.getElementById(“map”);

// find intersection of ray from camera to the center of the window

var ellipsoid = viewer.scene.mapProjection.ellipsoid;

var windowCoordinates = new Cesium.Cartesian2(elmnt.offsetHeight / 2, elmnt.offsetWidth / 2);

var ray = viewer.camera.getPickRay(windowCoordinates);

var intersection = Cesium.IntersectionTests.rayEllipsoid(ray, ellipsoid);

var intersectionPoint = Cesium.Ray.getPoint(ray, intersection.start);

timer = setInterval(function () {

camera.rotate(intersectionPoint, 0.005);

}, 10);

return false;

})

$("#turnLeft").mouseup(function () {

$(this).css(‘opacity’, ‘0.7’);

clearInterval(timer);

timer = null;

return false;

})

$("#turnLeft").mouseleave(function () {

$(this).css(‘opacity’, ‘0.7’);

clearInterval(timer);

timer = null;

return false;

})
Inserisci qui il codice…

``

3 Likes