如何向单个model-viewer中添加多个3D对象

你参考的方案是model-viewer早期测试阶段的非稳定API，<model-node> 标签在正式版发布前就已被完全移除，所以代码不会生效。目前可用的实现方案有两种：

• 方案1：预合并模型（性能最优）
  提前在Blender等3D建模工具中把需要展示的多个模型调整好相对位置、大小，合并导出为单个GLB/GLTF文件，直接赋值给<model-viewer>的src属性即可，不需要额外写前端逻辑，运行性能最好。

• 方案2：调用官方场景图API动态加载（灵活度最高）
  适合需要动态增删模型、单独控制单个模型状态的场景，实现代码如下：
  首先写基础HTML结构：

  <!-- 引入本地部署的3.0及以上稳定版model-viewer组件 -->
  <model-viewer id="viewer" camera-controls alt="多模型展示场景"></model-viewer>
  

  然后编写JS逻辑加载多个模型：

  const viewer = document.querySelector('#viewer');
  
  viewer.addEventListener('load', async () => {
    // 加载第一个模型
    const modelA = await viewer.loadModel('./a.glb');
    // 按需调整模型位置、缩放、旋转参数，避免模型重叠
    modelA.position.set(-1, 0, 0);
  
    // 加载第二个模型
    const modelB = await viewer.loadModel('./b.glb');
    modelB.position.set(1, 0, 0);
  
    // 所有模型加载完成后，自动调整相机视角适配全部内容
    viewer.camera.updateFramed();
  })
  
  // 触发初始加载，若不需要占位模型可传入自行生成的无内容空GLB文件地址即可
  viewer.src = './empty.glb';
  

注意事项 #

• 所有动态加载的模型共享同一场景的灯光、环境贴图、相机控制，和单模型场景的交互逻辑完全一致。
• loadModel方法会返回加载完成的模型实例，你可以直接通过这个实例控制模型的显隐、播放模型内置动画、修改材质属性，比如modelA.visible = false即可隐藏第一个模型。
• 不要使用任何教程里提到的<model-node>写法，所有涉及这个标签的资料都是基于2019年测试版的过时内容，无法在正式版本中运行。

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