ThreeJS加载的3D模型移动时拆分问题的修复咨询

问题原因 #

OBJ格式模型加载后，默认会将模型的每个部件拆分为独立的Mesh节点挂载在返回的Object3D容器下。如果拖拽逻辑误操作了单个子Mesh，或未确保整体操作父容器，就会出现模型拆分移动的情况。最稳妥的解决方式是将所有子Mesh合并为单个Mesh，从根源避免拆分。

解决方法 #

修改模型加载函数，在加载完成后合并所有子几何体，生成单个Mesh对象：

Future<three.Object3D> loadObjWithMtl(String mtlPathFolder, String mtlNameFile, String objPathFile) async {
    var manager = three.LoadingManager();
    var mtlLoader = three_jsm.MTLLoader(manager);
    mtlLoader.setPath(mtlPathFolder);
    var materials = await mtlLoader.loadAsync(mtlNameFile);
    await materials.preload();
    var loaderObj = three_jsm.OBJLoader(null);
    loaderObj.setMaterials(materials);
    final three.Object3D result = await loaderObj.loadAsync(objPathFile);

    // 收集所有子Mesh节点
    List<three.Mesh> meshes = [];
    result.traverse((obj) {
        if (obj is three.Mesh) {
            meshes.add(obj);
            // 按需设置阴影属性
            obj.castShadow = true;
            obj.receiveShadow = true;
        }
    });

    if (meshes.isNotEmpty) {
        // 合并所有几何体
        var mergedGeometry = three_jsm.BufferGeometryUtils.mergeBufferGeometries(
            meshes.map((m) => m.geometry as three.BufferGeometry).toList(),
            true // 合并顶点属性，保证几何体统一
        );
        // 使用第一个Mesh的材质（多材质场景可改用MultiMaterial或保留Group结构）
        var mergedMaterial = meshes.first.material;
        // 创建合并后的单个Mesh
        three.Mesh mergedMesh = three.Mesh(mergedGeometry, mergedMaterial);
        // 继承原容器的位置、旋转、缩放属性
        mergedMesh.position.copy(result.position);
        mergedMesh.rotation.copy(result.rotation);
        mergedMesh.scale.copy(result.scale);
        return mergedMesh;
    }

    return result;
}

额外检查点 #

• 确认拖拽逻辑针对的是返回的tableObject（合并后的Mesh或原Object3D父容器），而非单个子Mesh。
• 若模型必须保留多部件层级，确保拖拽时操作的是最顶层的父Object3D，而非子节点。

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