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.ulrichb…-reflection-sphere-2.html

  • 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/#…materials_cubemap_dynamic

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