ThreeJS中使用OBJLoader后如何将Mesh而非Object3D存入全局变量？

问题分析 #

你当前的代码存在两个核心问题：

1. 异步加载导致结果为空：OBJLoader.load是异步操作，你的objectLoader函数直接返回空的Object3D容器时，模型还未加载完成。
2. Object3D与Mesh的差异：OBJ文件加载后返回的Object3D是容器，实际网格数据以Mesh类型的子对象存在，而CSG工具仅支持直接操作Mesh。

解决方案 #

1. 用Promise封装异步加载，确保获取加载完成的模型

异步操作无法同步返回结果，用Promise封装加载逻辑，保证模型加载完成后再处理Mesh提取。

2. 提取或合并Mesh

• 若OBJ文件仅含单个Mesh：直接遍历Object3D子元素，筛选出Mesh类型对象。
• 若包含多个Mesh：合并为单个Mesh（CSG操作通常需要单个网格对象）。

代码示例 #

场景1：OBJ文件仅含单个Mesh

let bracket;
const loader = new THREE.OBJLoader();

// 封装为Promise函数，异步返回Mesh
function loadOBJAsMesh(objFile, objName) {
  return new Promise((resolve, reject) => {
    loader.load(
      objFile,
      (object) => {
        object.name = objName;
        object.scale.set(1, 1, 1);
        
        // 遍历子元素，找到第一个Mesh
        let targetMesh;
        object.traverse(child => {
          if (child.isMesh) {
            targetMesh = child;
            return false; // 找到后停止遍历
          }
        });

        targetMesh ? resolve(targetMesh) : reject(new Error("OBJ文件中未找到Mesh对象"));
      },
      undefined, // 加载进度回调（可选）
      error => reject(error) // 加载失败回调
    );
  });
}

// 使用函数获取Mesh并执行CSG操作
loadOBJAsMesh('model.obj', 'Bracket')
  .then(mesh => {
    bracket = mesh;
    // 这里可直接对bracket执行CSG操作
    console.log("成功获取Mesh：", bracket);
  })
  .catch(err => console.error("加载失败：", err));

场景2：OBJ文件包含多个Mesh（合并为单个）

需引入Three.js的BufferGeometryUtils工具类合并几何体：

import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';

let bracket;
const loader = new THREE.OBJLoader();

function loadAndMergeOBJAsMesh(objFile, objName) {
  return new Promise((resolve, reject) => {
    loader.load(
      objFile,
      (object) => {
        object.name = objName;
        object.scale.set(1, 1, 1);
        
        // 收集所有Mesh子对象
        const meshes = [];
        object.traverse(child => {
          if (child.isMesh) meshes.push(child);
        });

        if (meshes.length === 0) {
          reject(new Error("OBJ文件中未找到Mesh对象"));
        } else if (meshes.length === 1) {
          resolve(meshes[0]);
        } else {
          // 合并多个几何体
          const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
            meshes.map(m => m.geometry),
            true // 启用索引优化，按需调整
          );
          // 假设所有Mesh用同一种材质，材质不同可传入材质数组
          const mergedMaterial = meshes[0].material;
          const mergedMesh = new THREE.Mesh(mergedGeometry, mergedMaterial);
          
          mergedMesh.name = objName;
          mergedMesh.scale.copy(object.scale);
          mergedMesh.position.copy(object.position);
          mergedMesh.rotation.copy(object.rotation);
          
          resolve(mergedMesh);
        }
      },
      undefined,
      error => reject(error)
    );
  });
}

// 使用方式
loadAndMergeOBJAsMesh('model.obj', 'Bracket')
  .then(mesh => {
    bracket = mesh;
    // 执行CSG操作
  })
  .catch(err => console.error("加载合并失败：", err));

注意事项 #

• 若OBJ中的Mesh使用不同材质，合并时需将材质数组传入Mesh构造函数，保留材质信息。
• CSG操作依赖顶点顺序，若合并后出现异常，可调整mergeBufferGeometries的索引参数，或检查原始OBJ的顶点数据。

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