Ich habe eine einfache WebGL 3D Panorama-Anwendung mit SphereGeometry , PerspectiveCamera und a CanvasTexture erstellt. Jetzt möchte ich die Szene zum Leben erwecken, indem ich "HotSpots" über bestimmte Teile von SphereGeometry hinzufüge. Das Problem, das ich habe, ist zu verstehen, wie man die verschiedenen DOMElements aktualisiert, so dass ihre Position die aktualisierte Position Camera widerspiegelt.
Wenn sich Camera dreht, bewegen sich die verschiedenen DOMElements im Verhältnis zur Richtung, in die sich die Kamera dreht, in die Ansicht hinein und aus ihr heraus. Ich habe versucht, eine <div> absolute auf die <canvas> und translating Position X und Y zu positionieren, indem ich die zurückgegebene PerspectiveCamera camera.rotation verwendete, aber es hat nicht wirklich funktioniert; Hier ist mein JS & amp; CSS-Implementierung:
CSS
%Vor%JavaScript
%Vor%Hier ist auch ein Live-Beispiel für den gewünschten Effekt.
Was wäre die beste Lösung, um dieses Problem zu beheben? Was mir aufgefallen ist, als ich das gemacht habe, dass sich das DOMElements nur leicht bewegen würde; Ich habe auch bemerkt, dass sie nicht wirklich berücksichtigen würden, wo entlang der SphereGeometry sie platziert wurden (zum Beispiel, wenn sie "hinter" der Camera positioniert sind; wirklich komplex!
Ich bin froh, irgendwelche Plugins für die THREE.js -Engine zu verwenden und allen Tutorials zu folgen. Vielen Dank für die Antwort im Voraus!
Und Sie werden fertig sein !!
Okay, ich bin auf meine eigene Frage eingegangen! Ich hatte ein paar Probleme, aber ich habe herausgefunden, wie man CSS3d mit THREE.js WebGL-Szenen mischen kann.
Als erstes musste ich meine THREE.js-Bibliothek aktualisieren; Ich habe 71 von einem früheren Download ausgeführt, aber ich musste es auf die Bibliothek aktualisieren, die Herr Doob in this Beispiel. Ich aktualisierte auch meine CSS3d-Bibliothek zu der Datei, die in demselben Beispiel enthalten ist.
Ich habe dann diese Methode (die im Link angegeben wurde) verwendet, um eine Demoszene zu erstellen.
%Vor% Nachdem ich damit gearbeitet habe, habe ich die CSS3d scene , CSS3d object und CSS3d renderer , die in meiner Szene enthalten sein sollen, wieder verwendet.
Viel Glück für alle anderen und hoffentlich hilft das!
Tags und Links javascript css3 three.js