Three.js加载JSON模型仅显示Stone对象，其余未加载求助

云上老周

2026-5-13

问题分析与解决方案

我帮你拆解下这个问题：你遇到的情况既不是完全的JSON文件问题，也不是解析代码的错误，而是模型导出格式和Three.js ObjectLoader的预期不匹配导致的。

核心原因：

Three.js的ObjectLoader是专门用来加载Three.js自身导出的JSON格式（比如从Three.js编辑器导出的场景/对象结构），它需要JSON里包含明确的objects、materials、geometries等层级结构，才能还原出完整的对象树。
你从clara.io下载的JSON模型，看起来是把所有模型元素合并成了一个单个的Mesh（也就是你看到的名为Stone的对象），其他原本独立的模型部分并没有作为Object3D的子对象存在，而是打包进了这个Mesh的几何体数据里——这就是为什么你用traverse也找不到其他对象的原因。
看你console输出的对象内容，这个加载后的obj是一个单一Mesh，它的geometry里可能包含了多个顶点组，但这些组不会被ObjectLoader自动拆分成独立对象。

解决步骤：

1. 重新导出兼容格式的模型

回到clara.io的导出设置，选择Three.js Scene或者Three.js Object格式导出，并且确保勾选“保留对象层级”相关的选项（避免所有模型被合并成单个Mesh）。这种标准格式的JSON会被ObjectLoader正确识别，自动还原出所有独立对象。

2. 更换加载器适配现有JSON

如果无法重新导出，可以尝试用BufferGeometryLoader来加载现有JSON，手动处理几何体的分组：

const loader = new THREE.BufferGeometryLoader();
loader.load("models/unique-house.json", function(geometry) {
  // 先创建基础Mesh添加到场景
  const baseMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 });
  const mesh = new THREE.Mesh(geometry, baseMaterial);
  scene.add(mesh);

  // 检查几何体是否包含多个分组（对应原模型的不同部分）
  if (geometry.groups.length > 0) {
    // 为每个分组创建独立Mesh，搭配对应材质（你需要根据实际情况调整材质）
    geometry.groups.forEach((group, idx) => {
      const groupMaterial = new THREE.MeshStandardMaterial({ 
        color: getColorForGroup(idx) // 这里可以自定义分组对应的颜色/材质
      });
      const subMesh = new THREE.Mesh(geometry, groupMaterial);
      subMesh.material.index = idx;
      scene.add(subMesh);
    });
  }
});

// 辅助函数：根据分组索引返回对应颜色
function getColorForGroup(index) {
  switch(index) {
    case 0: return 0x808080; // Stone对应的颜色
    case 1: return 0xff0000; // 假设第二个分组是红色部分
    // 其他分组依次类推
    default: return 0xffffff;
  }
}

3. 验证原始JSON结构

你可以查看原始的JSON模型：如果它是包含objects、materials数组的标准Three.js场景结构，那ObjectLoader应该能正常加载；如果它只是单个几何体的JSON数据，那确实只会被加载成单个Mesh，需要手动拆分几何体分组来还原多个对象。

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