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座標不排隊

回答

相關問題