Question

THREE.js相对较新。我试图弄清楚如何将带有文本的DIV投影到equirectangular全景图中。

我有一个使用全景图像的简单示例。 https://threejs.org/examples/webgl_panorama_equirectangular

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

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

非常感谢任何帮助。谢谢。

Answer 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/

使用THREE.js

1 个答案: