Glaskugel mit three.js

  • Ich habe mich ein wenig mit einer kleinen Spielerei mit three.js beschäftigt. Manche Hobbyfotografen haben solch eine Glaskugel, die wie eine Linse wirkt und die Szene dahinter verkehrt herum abbildet. Ich habe so etwa mal mit three.js nachgebildet, aber keine transparente sondern ein spiegelnde Kugel, die die Szene im Rücken des Betrachters abbildet. Hier das Ergebnis, es ist interaktiv, d. h. man kann sich durch Ziehen der Maus darin bewegen und zoomen durch das Mausrad. Das Interaktive funktioniert auf meinem Smartphone noch nicht perfekt. weil beim senkrechten Ziehen auch die Default-Aktion wirkt und das ganze Bild verschoben wird.

    https://webentwicklung.ulrichbangert.de/panorama-reflection-sphere-2.html

    2 Mal editiert, zuletzt von Sempervivum (29. Oktober 2020 um 00:06)

  • Danke! Diese Berechnungen brauchen viel Power auf der GPU. Auf meinem PC läuft es vollkommen flüssig, auf meinem Handy ruckelt es beim Ziehen sehr stark. (Samsung A50, d. h. kein Premiummodell).

  • Coole Idee.
    Auf jeden Fall :thumbup:.
    Auf meinen älteren PC mit Windows 7 läuft es so gut wie gar nicht, der stürzt nur ab und schafft nur ein stehendes Bild.
    Auf meinen Laptop läuft es gut und ohne Probleme.
    Ich bin kein Mathe-Genie,
    kann mir mal einer sagen wie viele Berechnungen da laufen, dass ein älterer PC das nicht schafft?
    1969 hatte die Apollo 11 eine Rechenleistung wie heute ein älterer Taschenrechner.
    Theoretisch könnte man mit so ein Script die Apollo zum Abstürzen kriegen?
    Jetzt mal Spaß bei Seite.
    Ist ein Geiles Script und gut gelungen.
    Ist in der Kugel auch ein Bild drinnen, oder wird das alles durch Berechnungen da rein gecodet?
    Gibt es für solche Berechnungen ein Ausdruck ( wie 3 Satz Algebra usw. ) ?

  • Zitat

    Ist in der Kugel auch ein Bild drinnen, oder wird das alles durch Berechnungen da rein gecodet?

    Nein, in der Kugel ist eine virtuelle Kamera, die die Umgebung fotografiert. Und dieses Bild wird dann umgerechnet und auf die Kugel gelegt.

    Zitat

    Gibt es für solche Berechnungen ein Ausdruck ( wie 3 Satz Algebra usw. ) ?

    Ja, das dürfte im wesentlichen Trigonometrie oder Winkelmathematik sein, und das in 3D, wahrscheinlich mit Matrizen, Vektoren etc.

    Hier ist noch eine andere Demo von threejs:

    https://threejs.org/examples/#webg…cubemap_dynamic

    Dort sieht man, dass die Kamera die Umgebung mit den anderen Objekten, die herumfliegen, aufnimmt.

    Einmal editiert, zuletzt von Sempervivum (29. Oktober 2020 um 09:08)

  • Immer wieder schön zu sehen was mit Javascript so möglich ist.

    Das Script dürfte ja bestimmt noch mehr Rechenwege brauchen damit es so funktioniert wie es ist oder ?

    Ich bleibe bei meinen 3 Satz und Kreissberechnung , das ist mir doch noch ein wennig zu hoch:)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!