如何从GLTFLoader加载的模型中创建Three.js Mesh？

你遇到的错误：

Cannot convert undefined to object

出错的核心原因是GLTFLoader的load回调参数不是分开的geometry和materials——它只接收一个完整的GLTF对象。你写的(geometry, materials)这两个参数实际都是undefined，创建THREE.Mesh时自然会抛出上述错误。

下面是两种正确的处理方式：

方式1：直接使用模型自带的网格（推荐） #

GLTF模型加载后，gltf.scene是包含模型所有层级对象的场景容器，你可以直接将它添加到主场景，也能遍历子对象定位到单个Mesh：

const loader = new GLTFLoader();
loader.load("path/to/model", gltf => {
  // 直接添加整个模型到主场景
  scene.add(gltf.scene);
  // 调整整个模型的位置
  gltf.scene.position.z = -10;

  // 或者遍历子对象，对单个Mesh做操作
  gltf.scene.traverse(child => {
    if (child.isMesh) {
      child.position.z = -10;
      // 还可以修改材质、缩放等属性
    }
  });
});

方式2：提取几何体和材质创建新Mesh #

如果你确实需要基于原模型的几何体和材质创建全新的Mesh，得先从GLTF模型的子对象中提取对应的属性：

const loader = new GLTFLoader();
loader.load("path/to/model", gltf => {
  // 遍历模型找到第一个Mesh对象（根据你的模型结构调整，比如找特定名称的Mesh）
  let sourceMesh = null;
  gltf.scene.traverse(child => {
    if (child.isMesh) {
      sourceMesh = child;
      return; // 找到目标后停止遍历
    }
  });

  if (sourceMesh) {
    // 提取几何体和材质，注意材质可能是数组类型
    const newMesh = new THREE.Mesh(sourceMesh.geometry, sourceMesh.material);
    newMesh.position.z = -10;
    scene.add(newMesh);
  } else {
    console.error("加载的模型中未找到Mesh对象");
  }
});

内容的提问来源于stack exchange，提问作者Alin-Alexandru Peter