three.js：跳跃动画（ - 由于浮动不精确？）

Question

我在openlayers地图顶部的单独画布上使用了three.js.我同步地图视图和three.js相机（直视地图）的方式工作正常，看起来像这样：

function updateThreeCam(
    group, // three.js group — has camera in it
    view, // ol3 view
    map // ol3 map
) {
    // get visible part of map
    const extent = getViewExtent(view, map);
    const h = ol.extent.getHeight(extent);
    const mapCenter = ol.extent.getCenter(extent);

    // calculates how for away from the ground the camera has to
    // be to match the currently visible part of the map
    const camDist = h / (2 * Math.tan(constants.CAM_V_FOV_RAD / 2));

    camera.updateProjectionMatrix(); // needed?

    group.position.set(...mapCenter, camDist);
    group.updateMatrixWorld();
}

然而，当我将一个物体从相机前面飞到地面时，动作不顺畅：垂直运动跳得很多。 https://jsbin.com/qohutabofe/2/edit?js,output

这是动画代码：

// construct a spline to animate along
const waypoints = [
    objStartPosition,
    objEndPosition,
];
const pathSpline = new THREE.CatmullRomCurve3(waypoints);
// const pathSpline = new THREE.LineCurve3(...waypoints);
startTime = Date.now();

// [...]

function animate() {
    const diff = Date.now() - startTime;
    const t = diff / aniDuration;

    // sample curve at `t`
    const pos = pathSpline.getPointAt(t);

    // update position
    obj.position.copy(pos);

    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

奇怪的是，我并没有真正看到采样位置的跳跃：

你可以看到地图坐标往往是非常大的数字。这就是为什么我认为它可能是一个浮点精度问题。 - 将所有东西除以1000确实似乎有所帮助。这只有两个新问题：

• 透视效果不再那么剧烈/不再现实
• 平移不再按预期工作：地面上的矩形不会保持其位置

https://jsbin.com/bujepediro/1/edit?js,output