three.js和openlayers坐标不对齐

Question

我在openlayers地图顶部的单独画布上使用了three.js.我同步地图视图和three.js相机（直视地图）的方式如下：

// calculate how far away the camera needs to be, to
// see this part of the map
function distanceFromExtentAndFOV(h, vFOV) {
    return h / (2 * Math.tan(vFOV / 2));
}

// keep three.js camera in sync with visible part of openlayers map
function updateThreeCam(
    group, // three.js group, containing camera
    view, // ol view
    map // ol map
) {
    extent = getViewExtent(view, map);
    const h = ol.extent.getHeight(extent);
    mapCenter = ol.extent.getCenter(extent);
    camDist = distanceFromExtentAndFOV(h, constants.CAM_V_FOV_RAD);
    const pos = [...mapCenter, camDist];
    group.position.set(...pos);
    group.updateMatrixWorld();
}

// whenever view changes, update three.js camera
view.on('change:center', (event) => {
    updateThreeCam(group, event.target, map);
});
view.on('change:resolution', (event) => {
    updateThreeCam(group, event.target, map);
});
updateThreeCam(group, view, map);

我正在使用three.js来定制对象的动画，最终落在地面上。但是，当我将对象转换为openlayers特征时，原始的three.js对象和特征不能完美排列（尽管它们的位置坐标完全相同）。 - 也就是说，当你平移时，你可以看到s.th.稍微偏了。

// turn three.js planes into openlayers features:
const features = rects.map((rect) => {
    const point = new ol.geom.Point([
        rect.position.x, 
        tect.position.y
    ]);
    return new ol.Feature(point);
});
vectorSource.addFeatures(features);

因为我很确定我的同步three.js和ol的代码是正确的，所以我不确定会出现什么问题。我错过了吗？这里吗？

Answer 1

可能是您正在使用PerspectiveCamera并且会根据深度更改大小/位置。请尝试使用OrtographicCamera。