Как визуализировать объекты CSS3DObject поверх объектов WebGlRenderer? ⇐ CSS

[Anonymous]

Я пытаюсь визуализировать с помощью CSS3DRenderer в _3dScene в Three.js, но iframe всегда накладывает объект на сцену WebGl.
Как исправить эту проблему с перекрытием? iframe находится прямо посередине объекта и по-прежнему виден в любое время.




Вот как я запускаю CSS3DRenderer:
private _init3DRenderer()
{
this._3DRenderer = new CSS3DRenderer();
this._3DRenderer.setSize(this.css3dContainer.nativeElement.clientWidth, this.css3dContainer.nativeElement.clientHeight);
this._3DRenderer.domElement.style.position = 'absolute';
this._3DRenderer.domElement.style.zIndex = '0';
this._3DRenderer.domElement.style.top = "0";
this.css3dContainer.nativeElement.appendChild(this._3DRenderer.domElement);
}

а также инициализация WebGlRenderer:
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);
}

после инициализации я добавляю объект в WebG, а также в iframe.
let div = document.createElement("div");
let iframe = document.createElement("iframe");
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.src = url;

div.style.width = "100%";
div.style.height = "100%";
div.style.zIndex = "2";
div.style.scale = ".5";
div.appendChild(iframe);

let cssObject = new CSS3DObject(div);
this._3Dscene.add(cssObject);

две разные сцены используют один и тот же объект камеры и визуализируются следующим образом:
private _render()
{
this._renderer?.render(this._scene, this._camera);
this._3DRenderer?.render(this._3Dscene, this._camera);
}

html-шаблон
#webglContainer
style="width: 100%; height: 100%; position: absolute;">

style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;">



Подробнее: https://stackoverflow.com/questions/747 ... er-objects