Added CSS3D + WebGL example.

[mrdoob]

Description

Added an example mixing CSS3D and WebGL. Not sure if it's the simplest approach though...

https://raw.githack.com/mrdoob/three.js/128860b66f0c250af933714fc7f77a03ef0b06d7/examples/css3d_mixed.html

[Mugen87]

I have noticed the following errors in the browser console:

[Violation] Potential permissions policy violation: fullscreen is not allowed in this document.
[Violation] Potential permissions policy violation: xr-spatial-tracking is not allowed in this document.

They appear not just with rawgit but also when running the demo locally (with HTTPS). It seems it's possible to prevent them locally by adding this line when creating the iFrame.

iframe.allow = 'fullscreen;xr-spatial-tracking';

I wonder why they appear in the first place. Does the browser analyze the JS and realize the engine could make use of WebXR?

[mrxz]

I wonder why they appear in the first place. Does the browser analyze the JS and realize the engine could make use of WebXR?

I believe it's caused by the fact that the Three.js examples page tries to allow the inner iframe both fullscreen and xr-spatial-tracking (examples/index.html#L41). But in this example, it itself is in an iframe that isn't allowed these permissions, so it can't pass these on or grant them.

[Makio64]

@mrdoob Another example im often asked by client is the opposite usage, all the 3d is done in webgl and texts like tooltips or form input are added on top of them using css3d.

[mrdoob]

We have a couple of examples like that (using CSS2DRenderer):

https://threejs.org/examples/?q=css2#css2d_label
https://threejs.org/examples/?q=css2#webgl_loader_pdb

[Makio64]

@mrdoob actually i didnt realize its a webgl into a css into a webgl scene , i though you did all the canvas and environment in css as well , it works super well !

[whatisor]

Demo looks awesome! Just curious why it stops working since the 3rd layer

[mrdoob]

Not sure! Just asked Twitter about it.

[mrdoob]

And... here's the answer.