结合 OrbitControls 变换 HTML 元素，使它们看起来与场景中的对象一起旋转答案

【问题标题】：Transform HTML elements in conjunction with OrbitControls so that they appear to rotate with the objects in the scene结合 OrbitControls 变换 HTML 元素，使它们看起来与场景中的对象一起旋转
【发布时间】：2018-12-03 17:49:54
【问题描述】：

我创建了一个 Three.js 场景，其中有一个可以使用 OrbitControls 旋转的地球（带有地球纹理）。

我希望将标签“固定”到地球上的某个位置，即固定到澳大利亚中心的纬度和经度的“澳大利亚”标签，然后在使用 OrbitControls 时随地球对象移动以便引脚始终保持在其位置上方。

出于各种原因（更易于内容管理、更易于设置样式等），我需要这些标签是 HTML 元素（而不是 THREE.Sprite 例如）。这让事情变得更加棘手（在我看来），因为 Three.js 对象很容易一起旋转，但 HTML 元素不会。

让您了解我想要的最简单的方法是查看一个示例，因此下面链接的示例几乎正是我希望我的地球仪工作的方式。您可以看到他们使用带 HTML 标签的 Three.js 地球。

https://www.gsmlondon.ac.uk/global-oil-map/#1995-exporters

我查看了他们的代码，发现他们正在转换/翻译 HTML 元素，但我无法弄清楚导致 HTML 元素始终停留在它们开始的位置的计算，完全高于它们各自的国家/地区。

我正在使用以下计算将纬度和经度坐标（来自谷歌地图）转换为 X、Y、Z 坐标以在我的 three.js 场景中使用，这非常有效（即我可以创建一个小的 SphereGeometry并将其放置在生成的坐标处，它会出现在正确位置的上方）

function calcPosFromLatLonRad(lat, lon, radius){

    let phi = (90 - (lat)) * (Math.PI / 180);
    let theta = ((lon) + 180) * (Math.PI / 180);

    let x = -((radius) * Math.sin(phi) * Math.cos(theta));
    let z = ((radius) * Math.sin(phi) * Math.sin(theta));
    let y = -((radius) * Math.cos(phi));

    return [x, y, z];

}

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

以下代码是位于使用RequestAnimationFrame 的渲染函数内部的函数的一部分。

...element.style.transform = translate(${-Math.sin(camera.rotation.y) * 300}px,...

300 以上是地球的半径 (SphereGeometry)。

有没有人知道如何实现像我链接到的代码中实现的效果？即无论场景如何旋转，引脚始终处于正确位置。

谢谢。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

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

使用此工具可以为您节省大量时间，而不是手动尝试找出每个元素的位置/旋转：

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);
}

【讨论】：