能否叠加两个three.js 3D场景？叠加后黑屏问题求助

问题背景 #

• 用Three.js渲染两个3D场景，分别放入scene1和scene2容器，单独显示均正常，同时加载则页面黑屏
• 其中一个是2011年开发的云层动画（依赖旧版Three.js API），另一个是基于新版Three.js编写的驾驶舱模型渲染代码
• 需求是将驾驶舱场景叠加在云层场景上方，且不想修改老云层动画的源码

核心原因 #

老版本云层动画的代码会污染全局THREE对象，或在创建WebGL上下文时未做隔离，导致两个渲染器的上下文互相干扰；同时，画布的CSS层级、渲染顺序设置不当也会引发显示异常。

解决方案 #

方案1：用iframe隔离旧版场景（无需修改老代码，最省心） #

通过iframe将旧版云层动画的环境完全隔离，避免与新版Three.js代码冲突：

1. 新建clouds.html，将云层动画的代码及依赖的旧版Three.js移入，确保单独打开该文件能正常显示动画
2. 修改index.html的容器布局：

<div id="scene1">
  <iframe src="clouds.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div id="scene2"></div>
<script type="text/javascript" src="js/plane.js"></script>

3. 添加CSS确保驾驶舱场景叠加在上方：

#scene1, #scene2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#scene2 {
  z-index: 10;
}

4. 修改plane.js中渲染器的初始化，开启透明以露出下方云层：

var model_renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

方案2：全局对象隔离+渲染顺序调整（需少量修改） #

如果不想用iframe，可通过重命名全局THREE对象实现隔离：

1. 调整脚本加载顺序，先加载新版Three.js，再加载旧版并隔离：

<script src="新版Three.js地址"></script>
<script>
// 保存新版Three.js对象
var THREE_NEW = THREE;
</script>
<script src="云层依赖的旧版Three.js地址"></script>
<script>
// 重命名旧版Three.js，避免覆盖全局对象
var THREE_OLD = THREE;
// 恢复新版Three.js为全局对象
THREE = THREE_NEW;
</script>
<script src="js/plane.js"></script>
<script src="js/clouds.js"></script>

2. 修改云层代码中所有THREE为THREE_OLD（此步骤需改动老代码，若不想改则优先选方案1）
3. 确保渲染顺序：在renderCalls数组中先推入云层的渲染回调，再推入驾驶舱的渲染回调，保证驾驶舱叠加在上方

验证步骤 #

1. 单独测试iframe内的云层动画是否正常显示
2. 测试驾驶舱场景是否能透明叠加在云层上方
3. 调整CSS的z-index值和渲染器的alpha属性，确保层级和透明效果符合预期

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