Question

我正在尝试绘制一个场景，其中有一个地球独立于相机旋转。在这个星球上，我绘制了随机的贝塞尔曲线，就像在这个例子中一样：https://pubnub.github.io/webgl-visualization/

因此，我将贝塞尔曲线添加为：

    var origin = latLonToVector3(lat_source, lon_source, earth_radius);
    var destination = latLonToVector3(lat_destination, lon_destination, earth_radius);
    var bezierline = bezierCurveBetween(origin, destination);
    earth.add(bezierline);

，以便绘制的线与地球一起旋转。然后，我设法加载了平面的3D模型，并使其在绘制时遵循贝塞尔曲线。到目前为止，一切都很好。最后，我想旋转平面，以便其腹部始终遵循贝塞尔曲线的切线。为此，我将直线的每两个点的切向量计算为：

    var tangent_vectors = [];

    for (var i = 0; i < pnts.length - 1; i++) {

            var aux = new THREE.Vector3();

            aux.subVectors(pnts[i+1], pnts[i]);

            tangent_vectors[i] = aux.normalize();

    }

return tangent_vectors;

仅检查这些矢量是否正确，我使用了THREE.ArrowHelper来查看它们是否与曲线的每个线段相切，并且确实如此。由于我使用earth.add( arrowHelper );将它们添加到场景中，因此它们也随行星旋转并且保持一致。我通过绘制和擦除相同的贝塞尔曲线（起点和终点相同）来不断重复这个过程，因为行星在旋转。

但是，对于第一个贝塞尔曲线，3D模型的表现很好，但是随着行星旋转，并且在相同位置（具有相同的原点和目的地坐标）绘制了一条新的贝塞尔曲线，我可以看到飞机仍在跟随（ plane.lookAt(tangent_vectors[point_index]);）原始贝塞尔曲线的切线（即使我正在重新计算切线）。

我认为问题在于纬度和经度（lat_source，lon_source等）在现实生活参考框架中是固定的。这导致origin和destination变量即使行星正在旋转也总是返回相同的值。然后，新的贝塞尔曲线具有基本相同的点，但是由于我使用earth.add(bezier_line);添加了这些点，Three.js内部负责旋转它们，以将它们放置在新的旋转中，而这并不是我的切向量完成的。 / p>

我认为这是问题所在，但我不知道如何解决。我想我还需要根据新的旋转角度来旋转曲线的切线vecto，但是我找不到方法。

感谢您的帮助

在Three.js中旋转带有旋转父级的3D对象以面向给定方向时出现问题

0 个答案: