3D – Interaktive Webseite in einer Three.js WebGL scene mit CSS3DRenderer und Raycasting
3D Experiment – Interaktive Webseite in einer Three.js WebGL scene mit CSS3DRenderer und Raycasting
Experiment anschauen: https://soupaflow.com/3d
Die Möglichkeit die Webseite auch einmal von der „anderen“ Seite zu sehen ist bei diesem Experiment ein interessanter Nebeneffekt.
Funktioniert am besten mit einem aktuellen Firefox. Mit Chrome oder Safari geht es auch, die Scene sieht bei den beiden am Anfang jedoch „verrückt“ aus, man muß zuerst ein klein wenig mit gedrückter Maus die Welt bewegen.
Mit einem mobilen Gerät funktioniert das Experiment nicht, da es Maus- und Keyboard-Eingabe benötigt.
Der Trick eine interaktive Webseite in eine threejs WebGL Welt zu integrieren ist den threejs WebGLRenderer mit dem threejs CSS3DRenderer zu „mixen“.
Eine erste Herausforderung lag darin die enthaltene Webseite interaktiv zu halten bzw. zu machen. Das gelingt durch ein kleines aber wichtiges Detail: Die Zuweisung des CSS-Attributs: pointer-events:none zum Layer (div) des WebGL-Renderes. Dieser läßt damit die Mousevents zu dem darunter liegenden CSS3DRenderer, der die Webseite enthält, durch.
Die zweite Herausforderung lag darin die Objekte, die sich vor der Webseite befinden, als nicht durchklickbar zu handeln. Dafür müssen die Maus-Koordinaten getrackt werden und an den Raycaster übergeben werden damit herausgefunden werden kann über welchem Objekt sich die Maus befindet. Je nachdem wird dann pointer-events:none (Maus befindet sich über der Webseite) auf pointer-events:auto (Maus befindet sich über einem Objekt der 3D Welt) umgeschalten.
Das Problem dabei ist jedoch, dass die Webseite innerhalb der 3D Welt in einem iFrame dargestellt wird und über einem iFrame können die Maus-Koordinaten nicht getrackt werden. Es ist schon möglich die Mouse-Koordinaten über einem iFame an den parent zu „bubbeln“, aber diese Koordinaten entsprechen den iFrame Koordinaten und „passen nicht“ zu den Koordinaten der 3D Welt. Das führt dazu, daß der Raycaster, der mit falschen Koordinaten „gefüttert“ wird, meint, dass sich die Maus an einer anderen Stelle innerhalb der 3D Welt befindet.
Die Lösung ist es die Koordinaten global mit screenX und screenY abzunehmen und die Koordinaten über dem iFrame entsprechend seiner Offsets (Fenster-Position, Browser-Höhe etc.) auf die Koordinaten innerhalb der 3D Welt umrechnen zu lassen.
Das Experiment ist inspiriert von folgenden Beispielen:
https://mrdoob.com/lab/javascript/threejs/css3d/ (Werbe-Link)
https://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-htm…(Werbe-Link)
https://jeromeetienne.github.io/threex.htmlmixer/examples/demo.html#def…(Werbe-Link)
https://stemkoski.github.io/Three.js/CSS3D.html/ (Werbe-Link)
Es gibt auch ein zweites 3D Experiment:
Die Frage dabei: Kann man innerhalb einer 3D Welt in eine weitere 3D Welt eintauchen?
