THREE.js를 사용하여 등각 투영 파노라마에 피쳐 투영

Question

THREE.js에서 새로 도입되었습니다. 텍스트가있는 DIV를 투영법 파노라마로 투영하는 방법을 파악하려고합니다.

나는이 간단한 예제를 내 파노라마 이미지와 함께 사용했다. https://threejs.org/examples/webgl_panorama_equirectangular

질문 : 파노라마에있는 기능의 위도와 경도가 있습니다. 3D 공간에 DIV라는 라벨을 붙이는 프로젝트를 진행하고 싶습니다. 캔버스에서 경도와 위도를 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를

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