Position eines Elements auf einer Kugel

Neue Frage »

highlight Auf diesen Beitrag antworten »
Position eines Elements auf einer Kugel
Guten Tag,

ich möchte ein Element auf einer Kugel platzieren und wenn ich die Kugel drehe bzw. die Kamera/die Ansicht, dann soll sich das Element mit drehen.

Ein kleines Beispiel auf folgender Seite: https://live.tourdash.com/embed/7cb941da...edaaeeca7f314dd

Oben links auf "Men's Room" -> "Dressing Room" und dann kommt an einem Spinnt ein blauer Kreis mit einem "i-Buchstaben" vor. Dieser bleibt immer perfekt an der Position, selbst wenn man die Kamera dreht.

Dieser wird per X und Y Position des Browser-Fensters positioniert, z.B. 500 Pixel von links und 500 Pixel von oben.

Ich möchte das selbe realisieren und habe nun mithilfe der Kugelkoordinaten ähnliches versucht.

Um einen Punkt zu ermitteln, habe ich folgende Formel:

code:
1:
2:
var theta = Math.asin( z/r );
var phi = Math.atan2( y,x );


bzw. um die Koordinaten zu bekommen:

code:
1:
2:
3:
var x = r * Math.sin( pitch ) * Math.cos( heading );
var y = r * Math.sin( pitch ) * Math.sin( heading );
var z = r * Math.cos( pitch );


Heading = phi = Horizontaler Winkel 0-360° ( -180 bis 180 Grad )
Pitch = theta = Vertikaler Winkel 0-180° ( -90 bis 90 Grad )

Quelle: http://de.wikipedia.org/wiki/Kugelkoordinaten


Der Kugel wird durch ein Panorama Bild bestimmt. Dieser ist 13312 Pixel Breit. Das ist ja soweit ich weis der Umfang.

radius = r = u/2*PI = 13312 / ( 2*PI ) = 2118,706024393106 Pixel


Zum testen habe ich einfach mal Stupide 2 Punkte verglichen. Ich nenne das Element das ich platzieren will mal "Marker".

Das wo ich hingucke ist der "PointOfView", kurz PoV.

Der Marker soll 40° in der horizontalen Achse verschoben sein, also 40° nach Rechts von der Mitte aus.


Zusätzlich zum PoV kommt der "FieldOfView", kurz FoV hinzu. Dieser beschreibt das Feld das man sieht.. also nochmal alle Fakten:

Der Browser Fenster hat die Maße: 1366x768 Pixel
Das Panorama Bild hat die Maße: 13312:6656 Pixel
Der FieldOfView hat die Maße: 6656x3328 Pixel

Die Maße des FieldOfView werden zusätzlich durch den Zoom Faktor bestimmt.

Der Zoomfaktor geht von 0 bis 5 und wird durch folgende Formel bestimmt:

code:
1:
var zoom = 180 / Math.pow( 2, zlevel );


Kurz gesagt:

Level 0 - 180°
Level 1 - 90°
Level 2 - 45°
..
..


Da kommt die Frage auf: Wie viel Pixel sind den bitteschön 40° je nachdem wie der FoV ist?

Denn bei einem Zoom Level 0 beträgt der FoV 6656x3328 Pixel.
Bei einem Zoom Level 1 nur noch 3328x1664 Pixel.

Das heißt das der Abstand von P(0|0) zu P(40|0) nicht mehr der selbe ist.



Die Werte die ich bekomme:

PoV

x = r = 2118.6706024393106
y = phi = 0
z = theta = 0

Marker

x = 1622.9958417981713
y = 1361.8552122551046
z = 0
r = 2118.6706024393106
phi = 40°
theta = 0


Mit folgender Formel soll ich angeblich den Abstand zwischen zwei Punkten bekommen:

code:
1:
var d = Math.sqrt( Math.pow((point1.x-point2.x),2) + Math.pow((point1.y-point2.y),2) + Math.pow((point1.z-point2.z),2) );


Quelle: http://www2.informatik.hu-berlin.de/~san...ugelabstand.pdf


Wenn ich diese Formel auf die bestehenden Werte angebe, bekomme ich folgenden Wert: 1449.2560462123477

Ich habe einmal per Hand den Abstand zwischen PoV (dem Startpunkt) und dem Punkt an dem die 40° erreicht sind gemessen, das sind 1250 Pixel von Links bei einem Zoom Level von 1 ( 3323x1664 Pixel FoV ).


Weder 2118-1622 noch 1662-1449 noch 2118-1449 ergeben diese 1250 Pixel.. und wenn der Zoom Level sich ändert, ändern sich diese 1250 Pixel auch noch einmal..
Daher die Frage wie ich an den richtigen Abstand komme oder was ich noch zur Rechnung hinzufügen muss.


Ich weis es ist ziemlich kompliziert, aber ich würde dennoch um jede mögliche Hilfe bitten, selbst wenn es nur ein "Hm weis leider auch nicht weiter" ist, das würde mir schon etwas mehr Mut geben, weiter zu machen.

Und ganz viel Respekt an alle die sich damit auskennen.. vorrangig an den Herrn Pythagoras der bereits vor etlichen Jahren auf die Basis gekommen ist! Prinzipiell macht dieses Thema viel mehr Spaß als in der Schule, den damals wurde das so langweilig und ohne Relevanz zu einem echten Problem erklärt, das man gar nicht zu hören wollte.. jetzt nachdem ich mich selbst Tagelang erkundigt habe und vieles nachgeholt habe.. macht es verdammt viel Spaß.. bis zu dem Punkt wo man nicht weiter kommt, der senkt die Motivation erheblich unglücklich

Vielen Dank im Voraus. Falls weitere Informationen von Nöten sind, würde ich sie selbstverständlich posten. Ich würde mich auch mit Hilfen und Tipps zufrieden geben.. Hauptsache ich erlebe wieder ein Fortschritt, daraus kann ich mir wieder sämtliche Motivation auftanken, selbst wenn es nur ein kleiner Fortschritt ist.


MfG
kkk-87 Auf diesen Beitrag antworten »

Dein Marker ist ja in einem Punnkt (x,y) (Pixel,Pixel) gesetzt. So wie ich das verstanden habe, modelliert man eine gedachte Kugel auf der der Marker sitzen soll, damit ein räumliches Bild oder so ensteht?!
Jedenfalls hat dein Marker feste Koordinaten, die u.a. durch den oder die Winkel bestimmt sind.

Wenn du nun durch die Mausbewegung den Winkel (die Winkel) von PoV zum Marker verändern würdest, muss der Winkel zwischen beiden nicht fest (bspw. 40°) sein, sondern variabel, also eine Funktion, die dir die Mausbewegung so umrechnet, dass der Marker an der ursprünglichen Stelle bleibt.

Um das Problem zu verstehen, solltest du dich zuerst auf die horizontale Veränderung (links-rechts) beschränken und danach die vertikale (geht dann analog) in angriff nehmen und schließlich kombinieren.
Neue Frage »
Antworten »



Verwandte Themen

Die Beliebtesten »
Die Größten »
Die Neuesten »