使用同一WebGLRenderer渲染多场景失败求助

核心问题分析 #

你的代码存在几个关键问题导致渲染异常：

• 变量声明顺序错误：scene和scene2的定义在loader.load调用之后，模型加载回调执行时场景变量未完成初始化，无法正确添加模型。
• 异步加载未处理：GLTF模型加载是异步操作，初始渲染代码可能在模型加载完成前执行，此时场景为空，无法显示内容。
• 渲染区域未区分：未为两个场景设置独立渲染视口，导致场景互相覆盖，或因视口参数错误显示黑框。

修正后的完整代码 #

// 获取Canvas元素
const canvas = document.querySelector('canvas[name="your-canvas-name"]');

// 初始化场景
const scene = new THREE.Scene();
const scene2 = new THREE.Scene();

// 初始化相机（可根据需求调整参数）
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
  alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;

// 初始化GLTF加载器
const loader = new THREE.GLTFLoader();

// 加载第一个GLTF模型
loader.load(
  'your-first-model.gltf',
  function (gltf) {
    scene.add(gltf.scene);
    render();
  },
  undefined,
  function (error) {
    console.error('第一个模型加载失败:', error);
  }
);

// 加载第二个GLTF模型
loader.load(
  'your-second-model.gltf',
  function (gltf) {
    scene2.add(gltf.scene);
    render();
  },
  undefined,
  function (error) {
    console.error('第二个模型加载失败:', error);
  }
);

// 多场景渲染函数
function render() {
  // 清除画布
  renderer.clear();

  // 渲染第一个场景到左半区域
  renderer.setViewport(0, 0, window.innerWidth / 2, window.innerHeight);
  renderer.render(scene, camera);

  // 清除深度缓冲区，避免第二个场景被遮挡
  renderer.clearDepth();

  // 渲染第二个场景到右半区域
  renderer.setViewport(window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
  renderer.render(scene2, camera);

  // 持续渲染
  requestAnimationFrame(render);
}

// 窗口 resize 适配
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

关键修复点说明 #

• 调整变量顺序：先完成Canvas、场景、相机、渲染器的初始化，再执行模型加载，确保回调能访问到已初始化的场景。
• 异步加载处理：在模型加载完成后触发渲染，并通过requestAnimationFrame实现持续渲染，保证模型加载后实时显示。
• 视口划分：使用renderer.setViewport为两个场景分配独立的渲染区域，避免互相覆盖，这是实现多场景分区域渲染的核心。
• 深度缓冲区清理：渲染第二个场景前调用renderer.clearDepth()，清除第一个场景的深度信息，防止第二个场景的物体被遮挡。
• 错误处理：添加加载错误回调，方便排查模型加载失败的问题。

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