hi,
I'm looking into the possibility of having a three.js canvas on top of the
ol3 canvas, for the purpose of displaying custom 3d models / animations on
the map.
since the map is 2d, I thought it would be as simple as (re)calculating the
correct distance of the camera to the ground, whenever the user pans or
zooms. what I have tried so far:
// calculate how far away the camera needs to be from the ground, to match
the currently visible extent
function distanceFromExtentAndFOV(extentHeight, verticalFOV) {
const distance = extentHeight / (2 * Math.tan(verticalFOV / 2));
return distance;
}
function updateThreeCam(camera, view, map) {
// get extent
const extent = view.calculateExtent(map.getSize());
// calculate extent width and height
const w = extent[2] - extent[0];
const h = extent[3] - extent[1];
// calculate center coordinates
const mapCenter = [
extent[0] + (0.5 * w),
extent[1] + (0.5 * h),
];
// calculate required distance to ground
distance = distanceFromExtentAndFOV(h, camera.fov);
// move camera to center, at the right altitude
camera.position.set(
mapCenter[0], mapCenter[1],
distance
);
camera.updateProjectionMatrix();
}
const view = map.getView();
// whenever user pans / zooms, update camera position accordingly
view.on('change:center', (event) => {
updateThreeCam(camera, event.target, map);
});
view.on('change:resolution', (event) => {
updateThreeCam(camera, event.target, map);
});
fiddle: https://jsbin.com/suwajuluto/1/edit?js,output
from what I can tell zooming seems to work, but for some reason panning
isn't; and it is not entirely clear to me why.
am I missing something here? or is there maybe a better approach to
synchronising a camera view the current openlayers view? is ol maybe using
s.th. like a view matrix internally that I can read / re-use in three.js?
--
You received this message because you are subscribed to the Google Groups
"OpenLayers Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/openlayers-dev.
To view this discussion on the web visit
https://groups.google.com/d/msgid/openlayers-dev/02d08b9c-4d78-421e-9729-bc223c80b501%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
