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 객체와 기능이 완벽하게 정렬되지 않습니다 (위치 좌표는 동일 함). - 또한 냄비에 걸리면 그 냄새를 볼 수 있습니다. 약간 벗어났습니다.

// 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를하고 안녕, 내 코드가 정확한지 확신으로

, 나는 무슨 일이 잘못 정말로 확실하지 않다. 나는 실종되었다. 이리?

Answer 1

PerspectiveCamera을 사용하고있을 수 있으며 깊이에 따라 크기/위치가 변경 될 수 있습니다. 대신 OrtographicCamera을 시도하십시오.