如何在地球上绘制国家名称，以便网格与表面对齐

Question

我正在尝试绘制地球的国家/地区名称，因此文本网格将与表面对齐，但我无法计算正确的旋转。对于文本，我使用 THREE.TextGeometry。使用光线投射在交点处单击国家/地区的网格时会出现名称。我不知道如何将这些坐标转换为正确的旋转角度。我没有发布我的代码，因为它完全是一团糟，我相信对于一个知识渊博的人来说，通常会更容易解释如何实现这一点。

这是想要的结果：

Answer 1

很有意思question.I这种方式试过了，我们可以把文字看成一个平面。让我们从球体中心（或位置）定义一个法向量 n 以指向要显示文本的球体表面。我有一个简单的方法来使法向量正确。 1.将文本网格放在球体中心。 text.position.copy(sphere.position) 2. 将文字制作到球面上的点，text.lookAt(point) 3.relocate 正文切中要点。 text.position.copy(point)

Answer 2

我尝试过的另一个解决方案（当然，这不是最终的），基于this SO answer。这个想法是使用与光线投射器相交的面的法线。

获取交点
获取相交面
获取面(2)的法线。
获取世界坐标中的法线 (3)。
将文本对象的位置设置为世界坐标 (4) 中的交点 (1) 和法线之和。
将文本对象的 lookAt() 向量设置为其位置 (5) 与世界坐标中的法线 (4) 之和。

看起来很长，但实际上它并没有那么多代码：

var PGHelper = new THREE.PolarGridHelper(...); // let's imagine it's your text object ;)
var PGlookAt = new THREE.Vector3(); // point of lookAt for the "text" object

var normalMatrix = new THREE.Matrix3();
var worldNormal = new THREE.Vector3();

在动画循环中：

for ( var i = 0; i < intersects.length; i++ ) {
    normalMatrix.getNormalMatrix( intersects[i].object.matrixWorld );
    worldNormal.copy(intersects[i].face.normal).applyMatrix3( normalMatrix ).normalize();

    PGHelper.position.addVectors(intersects[i].point, worldNormal);
    PGlookAt.addVectors(PGHelper.position, worldNormal);
    PGHelper.lookAt(PGlookAt);
}

jsfiddle 例子

该方法适用于任何几何形状的网格（尽管已检查球体和长方体 ;)）。而且我相信还有其他更好的方法。

如何在地球上绘制国家名称，以便网格与表面对齐

How to plot country names on the globe, so the mesh will be aligned with the surfaces

linear-algebra

three.js