将要素投影转换为具有 THREE.js 的等距柱状投影全景

Question

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

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

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

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

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

Answer 1

这个问题

的代码似乎可以解决问题：3D 坐标到 2D 屏幕位置

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 更新了 jsfiddle.js

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