2017-01-29 3 views
0

Relativ neu zu THREE.js. Ich versuche herauszufinden, wie man einen DIV mit Text in ein äquidirektangulares Panorama projiziert.Feature Projektion in equirectangular Panorama mit THREE.js

Ich habe dieses einfache Beispiel, das mit meinen Panoramabildern arbeitet.

Die Frage: Ich habe einen Breiten- und Längengrad eines Features, das in meinem Panorama ist, würde ich gerne ein DIV-Kennzeichnung solcher Artikel in 3D-Raum projizieren. Wie konvertiere ich Länge und Breite in X und Y auf der Leinwand, so dass ich die Attribute DIVS left und top style ändern kann, so dass die Beschriftung im 3D-Raum gerendert und an ihren Koordinaten fixiert angezeigt wird?

UPDATE: Zur Klarheit, wie nimmt man Planeten Erde Länge und Breite, und wandelt es in X Y Pixel in einem Netz? Ich weiß, wo das Bild auf der Erde gemacht wurde, und ich weiß, wo ein Gegenstand in diesem Bild auf der Erde gemacht wurde. Ich möchte dieses Objekt im 3D-Raum beschriften.

Jede Hilfe würde sehr geschätzt werden. Vielen Dank.

Antwort

0

-Code von dieser Frage scheint den Trick zu tun: 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); 
} 

ich die jsfiddle mit der neuen Version von Three.js aktualisiert

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

+0

Dank. Dies geht jedoch nicht auf meine Frage ein. Die Frage ist, wie man den Breiten- und Längengrad des Planeten Erde in Pixel X Y innerhalb eines Gitters umwandelt. Ich kenne die geographische Breite des Kugelzentrums. – chasez0r

Verwandte Themen