使用 THREE.js 将特征投影到等角全景图答案

【问题标题】：Feature projection into equirectangular panorama with THREE.js使用 THREE.js 将特征投影到等角全景图
【发布时间】：2017-02-09 23:57:21
【问题描述】：

对 THREE.js 来说相对较新。我正在尝试弄清楚如何将带有文本的 DIV 投影到等距矩形全景图中。

我有一个简单的例子来处理我的全景图像。 https://threejs.org/examples/webgl_panorama_equirectangular

问题：我的全景图中有一个要素的纬度和经度，我想将一个标记此类项目的 DIV 投影到 3D 空间中。如何在画布上将经度和纬度转换为 X 和 Y，以便更改 DIVS 左侧和顶部样式属性，以便标签在 3D 空间中呈现并固定在其坐标上？

更新：为了清楚起见，如何获取地球经度和纬度，并将其转换为网格内的 X Y 像素？我知道这张照片是在地球上的什么地方拍摄的，我也知道那张照片中的某个项目是在地球上的什么地方拍摄的。我想在 3D 空间中标记该项目。

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： three.js

【解决方案1】：

这个问题的代码似乎可以解决问题： 3d coordinates to 2d screen position

function getCoordinates( element, camera ) {

    var screenVector = new THREE.Vector3();
    element.localToWorld( screenVector );

    screenVector.project( camera );

    var posx = Math.round(( screenVector.x + 1 ) * renderer.domElement.offsetWidth / 2 );
    var posy = Math.round(( 1 - screenVector.y ) * renderer.domElement.offsetHeight / 2 );

    console.log( posx, posy );
}

我用新版本的 Three.js 更新了 jsfiddle

http://jsfiddle.net/L0rdzbej/409/

【讨论】：

谢谢。然而，这并没有解决我的问题。问题是，如何将地球的纬度和经度转换为网格内的像素 X Y。我知道球心的经纬度。