Three.js – mélange de WebGL et CSS3D avec iFrame

J'ai préparé une page de travail qui mélange WebGL et CSS3D (avec un peu d'aide de SO ici ), et cela fonctionne très bien. Je lance un iframe pour une bonne mesure:

Mais il manque de la capacité d'interagir avec l'iframe.

Dans la démo purement CSS3D on peut même faire défiler les pages et marquer du texte, etc.:

En CSS3D , la combinaison de WebGL devant le processeur CSS3D entrave l'interaction. Y a-t-il un moyen de contourner ceci?

Merci Dirk

Vous pouvez appliquer des événements de CSS3D CSS : aucun sur le nœud WebGL , afin que les événements l'atteignent pour atteindre les noeuds CSS3D et l'iframe sous-jacents.

Vous joignez actuellement THREE.TrackballControls au document lui-même, de sorte qu'aucun changement n'est nécessaire là-bas.

Notez que les événements sur un iframe sont envoyés directement à l'iframe. Le cadre parent ne peut pas les observer directement, les capturer et les renvoyer, ou envoyer des synthèses. Donc, vous perdez des événements de contrôle de navigation alors que le pointeur est sur un iframe. Les événements Mousewheel ont été une exception à cela dans Google Chrome (forked WebKit), mais peut-être pas plus longtemps (2016-février). Pour maintenir un contrôle de navigation en douceur, une approche consiste à couvrir l'iframe avec une div (éventuellement gris) transparente lorsqu'elle est "non utilisée". Et supprimez cette couverture lorsque vous pensez que l'utilisateur souhaite interagir avec l'iframe, soit en raison d'un clic, soit en fonction de la trajectoire du pointeur. Une séquence d'événements de clic peut être divisée, le parent attrape le mousedown et découvre pour laisser les événements de souris et de clic pour l'iframe – mais c'est une illusion imparfaite, selon le site iframed pour ne pas se soucier de voir le mousedown.

Il est probable que l'iframe soit couvert par un autre élément qui capture les événements de la souris (la toile entière ou css3d div avec les contrôles de trackball).

SOLUTION 1

Si c'est le cas, vous devez placer un plan invisible dans la scène webgl qui correspond à l'objet css3d et écouter les événements mousewheel sur la fenêtre. Lorsqu'un événement mousewheel se produit, utilisez un raycaster (voir les exemples d'objets interactifs mr doob) pour voir si vous frappez ce plan invisible. Et enfin avant d'ajouter l'avion à la scène, vous devez ajouter l'élément que vous souhaitez contrôler en tant que propriété du plan webgl qui est touché par le rayon. De cette façon, vous pouvez le rechercher facilement à partir de l'intersection.

SOLUTION 2

Gardez une trace d'un point où votre iframe est et mesure la distance à l'iframe en utilisant THREE.Vector3 (). DistanceTo (otherVector3). Si c'est assez proche, faites défiler l'iframe. Vous devez toujours écouter la fenêtre pour les événements mousewheel.

REMARQUE: ceci ne rend pas l'iframe FULLY interactive, uniquement pour les événements que vous capturez, puis déclenchez / transmettez.

REMARQUE: vous ne pouvez pas défiler les iframes de domaine croisé …

Il existe déjà une solution de travail pour rendre l'iframe complètement interactif par Jens Arps :

J'ai forgé cette approche et j'ai ajouté une interface simple et un méta-navigateur qui fonctionne comme un navigateur normal:

Code source :

Demo :

Les sites Web devraient être "convaincants" pour fonctionner.

Ok, je ne sais pas si cela répond à votre question, mais je viens de terminer l'essai. La solution la plus simple pour moi était de rendre invisible le style d'élément dom WEB GL RENDER.

Tant que vous avez la configuration Three.Vector2 (), vous êtes prêt à partir. J'espère que ça aide.

http://adndevblog.typepad.com/cloud_and_mobile/2015/07/embedding-webpages-in-a-3d-threejs-scene.html