Angular中Three.js CSS3DRenderer渲染iframe的层级交互问题修复

在Angular项目中使用Three.js的CSS3DRenderer渲染iframe时，会遇到两难问题：

• 若WebGL容器在CSS3D容器之后（层级更高），iframe无法响应任何指针事件，因为被WebGL层完全遮挡
• 若调换容器顺序让CSS3D容器层级更高，CSS3DObject会遮挡其他WebGL场景内容，且可能出现渲染容器绑定异常

两种容器顺序的表现：

• 顺序1（WebGL在上，iframe无交互）：

  <div id="css3d"></div>
  <div id="webgl"></div>
  

  
• 顺序2（CSS3D在上，遮挡WebGL内容）：

  <div id="webgl"></div>
  <div id="css3d"></div>
  

  

核心解决方案：通过CSS指针事件控制层级交互 #

我们可以通过pointer-events属性精准控制WebGL容器的交互权限，既让iframe能接收点击，又不影响WebGL场景的其他交互。

方案1：全局禁用WebGL容器指针事件（适合WebGL无需交互的场景）

直接修改HTML模板中WebGL容器的样式，添加pointer-events: none，让WebGL层不拦截任何指针事件，所有点击都会穿透到下方的CSS3D层：

<div (window:resize)="onWindowResize($event)"
     #webglContainer
     style="width: 100%; height: 100%; position: absolute; pointer-events: none;">
</div>
<div #css3dContainer
     style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;">
</div>

方案2：局部控制指针事件（兼容WebGL交互场景）

如果WebGL场景需要响应鼠标操作（比如旋转、缩放模型），可以只在鼠标悬停在iframe区域时禁用WebGL的指针事件，离开后恢复：

1. 给iframe添加鼠标事件监听
   在创建CSS3DObject时，为iframe绑定mouseenter和mouseleave事件，动态修改WebGL容器的指针事件属性：

   const obj = new Object3D();
   const iframe = document.createElement('iframe');
   // 配置iframe基础属性
   iframe.src = 'your-iframe-url';
   iframe.style.width = `${width}px`;
   iframe.style.height = `${height}px`;
   iframe.style.border = 'none';
   
   const css3dObject = new CSS3DObject(iframe);
   obj.add(css3dObject);
   
   // 动态控制WebGL容器的指针事件
   iframe.addEventListener('mouseenter', () => {
     this.webglContainer.nativeElement.style.pointerEvents = 'none';
   });
   iframe.addEventListener('mouseleave', () => {
     this.webglContainer.nativeElement.style.pointerEvents = 'auto';
   });
   

2. 保留WebGL渲染器的透明设置
   确保WebGLRenderer初始化时的alpha: true配置不变，保证WebGL区域透明，不会遮挡CSS3D元素的视觉显示：

   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);
   }
   

3. 维持渲染顺序
   保持双渲染器的调用顺序：先渲染WebGL，再渲染CSS3D，确保视觉上CSS3D元素叠加在WebGL之上：

   private _render() {
       this._renderer?.render(this._scene, this._camera);
       this._3DRenderer?.render(this._scene, this._camera);
   }
   

额外排查点

如果CSS3DObject出现容器绑定异常，检查CSS3DRenderer的挂载逻辑，确保每次初始化时容器为空，避免重复挂载DOM元素：

private _init3DRenderer() {
    this._3DRenderer = new CSS3DRenderer();
    this._3DRenderer.setSize(this.css3dContainer.nativeElement.clientWidth, this.css3dContainer.nativeElement.clientHeight);
    // 清空容器后再添加渲染DOM
    this.css3dContainer.nativeElement.innerHTML = '';
    this.css3dContainer.nativeElement.appendChild(this._3DRenderer.domElement);
}

内容的提问来源于stack exchange，提问作者Patrick