three.js和openlayers坐标不排队

我在openlayers地图上的单独画布上使用three.js。我同步地图和three.js所照相机（它看起来直下到地图）的视图方式是这样的：three.js和openlayers坐标不排队

// 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所和醇的代码是正确的，我真的不知道什么什么错误。我错过了s.th.这里？

来源

2017-02-15 kindoflike

从ol的像素位置的保真度是什么？意思是，html平面的像素范围是1024，512？窗口越小，偏差越大。我个人会将ol的点位置作为左侧和上侧的百分比。你确定浏览器没有放大或缩小吗？你有没有检查过地图平面的宽高比？它是否与ol窗口纵横比？ – Radio

原来相机的位置（相对于父组）不是它应该是 – kindoflike

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

来源

2017-02-15 19:48:32 Hallgrim

是的，我正在使用'PerspectiveCamera'（主要是因为我需要一个逼真的透视效果）。 “OrtographicCamera”肯定会避免这个问题，但它不是我想要做的选择。 – kindoflike

它看起来像相机根据深度移动东西的方式是你的问题。你可以看到左边的点太靠左了。在右边，它太靠右。我想你可以尝试使用点的深度值来使其正确。 – Hallgrim

three.js和openlayers坐标不排队

回答

相关问题