Javascript 结合OrbitControl变换HTML元素，使其看起来与场景中的对象一起旋转

我创建了一个Three.js场景，其中有一个球体（带有地球纹理），可以使用轨道控件旋转

我想让标签“粘”在地球上的某个位置，即“澳大利亚”标签，固定在澳大利亚中心的纬度和经度上，当使用轨道控制时，该标签随地球物体移动，以便该销始终保持在其位置上方

出于各种原因（更易于内容管理、更易于样式化等等），我需要这些标签是HTML元素（而不是

THREE.Sprite

）。这使得事情变得更加棘手（在我看来），因为三个.js对象很容易一起旋转，但HTML元素不会

要理解我想要的东西，最简单的方法就是看一个例子，下面链接的例子就是我想要的地球仪的工作原理。您可以看到，他们使用带有HTML标签的Three.js globe

我查看了他们的代码，看到他们正在转换/翻译HTML元素，但我无法找出导致HTML元素始终保持在起始位置的计算方法，完全高于各自的国家

我正在使用下面的计算将纬度和经度坐标（来自谷歌地图）转换为X、Y、Z坐标，以便在我的three.js场景中使用，这非常有效（即，我可以创建一个小的

球度测量

，并将其放置在生成的坐标处，它将显示在正确的位置上方）

首先，我只是想让HTML元素在X轴上旋转。我想出了以下代码，但它不能正常工作

下面的代码是位于使用

RequestAnimationFrame

的渲染函数内部的函数的一部分

…element.style.transform=translate（${-Math.sin（camera.rotation.y）*300}px，

300以上为球体的半径（

球墨法

）

有人知道我怎样才能获得像我链接的代码中那样的效果吗？也就是说，无论场景如何旋转，插针始终处于正确的位置

---

谢谢。

Three.js有一个转换器，可以将3D转换应用于HTML元素。它被称为。您可以看到一个正在运行的示例

使用此工具而不是手动尝试计算每个元素的位置/旋转将节省大量时间：

var scene = new THREE.Scene();
var sceneCSS = new THREE.Scene();

// Adding new CSS3DObjects to your scene:
var object = new THREE.CSS3DObject( HTMLElement );
sceneCSS.add(object);

var renderer = new THREE.WebGLRenderer();
var rendererCSS = new THREE.CSS3DRenderer();

var camera = new THREE.PerspectiveCamera();

onUpdate() {
    // This will render your WebGL 3D Scene
    renderer.render(scene, camera);

    // This will apply 3DTransforms to your HTML elements
    rendererCSS.render(sceneCSS, camera);
}

var scene = new THREE.Scene();
var sceneCSS = new THREE.Scene();

// Adding new CSS3DObjects to your scene:
var object = new THREE.CSS3DObject( HTMLElement );
sceneCSS.add(object);

var renderer = new THREE.WebGLRenderer();
var rendererCSS = new THREE.CSS3DRenderer();

var camera = new THREE.PerspectiveCamera();

onUpdate() {
    // This will render your WebGL 3D Scene
    renderer.render(scene, camera);

    // This will apply 3DTransforms to your HTML elements
    rendererCSS.render(sceneCSS, camera);
}