I am attempting to display an iframe using the CSS3DRenderer from three.js within Angular.
However, I am encountering an issue where I cannot interact with any content (no pointer events).
It appears that the problem lies in the overlapping webgl <div id="webgl">.
When I switch the order of the two divs <div id="css3d"> and <div id="webgl">, the CSS3DObject covers the other content and is not attached to the desired rendering box.
Order:
<div id="css3d">
<div id="webgl">
https://i.sstatic.net/KLgOW.png
Order:
<div id="webgl">
<div id="css3d">
https://i.sstatic.net/Ng2Xe.png
This is how I initialize the CSS3DRenderer:
private _init3DRenderer()
{
this._3DRenderer = new CSS3DRenderer();
this._3DRenderer.setSize(this.css3dContainer.nativeElement.clientWidth, this.css3dContainer.nativeElement.clientHeight);
this.css3dContainer.nativeElement.appendChild(this._3DRenderer.domElement);
}
Additionally, I am initializing the WebGLRenderer as follows:
private _initRenderer()
{
this._renderer = new WebGLRenderer({ alpha: true, antialias: true });
this._renderer.setPixelRatio(window.devicePixelRatio);
this._renderer.setSize(this.webglContainer.nativeElement.clientWidth, this.webglContainer.nativeElement.clientHeight);
this._renderer.outputEncoding = sRGBEncoding;
this._renderer.shadowMap.enabled = true;
this._renderer.shadowMap.type = PCFSoftShadowMap;
this.webglContainer.nativeElement.appendChild(this._renderer.domElement);
}
After initialization, I add an object to both the WebG and the iframe.
const obj = new Object3D();
let css3dObject = new CSS3DObject(iframe);
obj.add(css3dObject)
// create an invisible plane for the DOM element to clip
// a WebGL geometry.
var material = new MeshPhongMaterial({
opacity: 0.1,
color: new Color(0x000001),
blending: NoBlending,
side: DoubleSide,
});
var geometry = new BoxGeometry(width, height, 30);
var mesh = new Mesh(geometry, material);
mesh.receiveShadow = true;
obj.add(mesh);
The different renderers share the same scene:
private _render()
{
this._renderer?.render(this._scene, this._camera);
this._3DRenderer?.render(this._scene, this._camera);
}
HTML template:
<div (window:resize)="onWindowResize($event)"
#webglContainer
style="width: 100%; height: 100%; position: absolute;">
</div>
<div #css3dContainer
style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;">
</div>