基于THREE.js的等矩形全景图特征投影
基于THREE.js的等矩形全景图特征投影
提问于 2017-01-30 01:18:22
相对较新的THREE.js。我正在试图弄清楚如何将一个带有文本的DIV投影到一个等长方形的全景图中。
我有一个简单的例子来处理我的全景图像。https://threejs.org/examples/webgl_panorama_equirectangular
问题:我的全景图中有一个要素的纬度和经度，我想将一个DIV标签投射到3D空间中。如何在画布上将经度和纬度转换为X和Y，以便更改DIVS left和top style属性，以便标签在3D空间中呈现并固定到其坐标？
更新:为了清晰起见，如何获取地球的经度和纬度，并将其转换为网格中的X、Y像素？我知道这张照片是在地球上哪里拍摄的，我也知道照片中的一件东西是在地球上哪里拍摄的。我想在3D空间中标记该物品。
任何帮助都将不胜感激。谢谢。
回答 1
Stack Overflow用户
发布于 2017-01-30 17:56:22
这个问题中的代码似乎做到了这一点：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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41923721
复制相关文章
相似问题
腾讯云开发者
