通过Web Worker使用GLTFLoader加载模型导致SkinnedMesh网格变形

兄弟，我太懂这种两难了！之前为了解决主线程加载模型卡成PPT的问题，也试过用Web Worker跑GLTFLoader，结果刚开心没两分钟，就碰到了和你一模一样的蒙皮网格变形问题😅 其实核心问题出在Web Worker和主线程的数据传递规则，以及SkinnedMesh的特殊结构上，我给你拆解下原因和解决思路：

为啥用Worker加载后模型会变形？ #

Web Worker和主线程之间只能传递可序列化的数据，而THREE.js的SkinnedMesh（蒙皮网格）里藏了一堆不能直接序列化的关联信息：

• 骨骼和网格的绑定关系、skeleton对象里的层级引用
• boneInverses（骨骼逆矩阵）这类和WebGL上下文隐性关联的数据
  当你直接把Worker里加载好的整个模型对象传到主线程时，这些关键的关联信息会在结构化克隆的过程中丢失或被破坏，结果就是渲染时骨骼没法正确驱动网格，自然就变形了。

解决思路：Worker抽数据，主线程重建模型 #

别想着直接传整个Mesh对象了，咱们换个思路：只在Worker里做模型的解析和纯数据提取，把“干净”的序列化数据传给主线程，再在主线程用这些数据重建SkinnedMesh。

1. Worker里的处理：提取纯数据

在Worker里用GLTFLoader加载完成后，把模型的几何数据、蒙皮权重、骨骼结构这些能序列化的信息单独抽出来，不要带任何THREE.js的复杂对象：

// 这是Worker文件里的代码
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

self.onmessage = async (e) => {
  const loader = new GLTFLoader();
  try {
    const gltf = await loader.loadAsync(e.data.modelUrl);
    const skinnedMesh = gltf.scene.getObjectByType('SkinnedMesh');
    if (!skinnedMesh) {
      self.postMessage({ type: 'success', data: null });
      return;
    }

    // 提取几何的核心数据（顶点、UV、蒙皮索引/权重）
    const geometryData = {
      position: skinnedMesh.geometry.attributes.position.array,
      uv: skinnedMesh.geometry.attributes.uv?.array,
      skinIndex: skinnedMesh.geometry.attributes.skinIndex.array,
      skinWeight: skinnedMesh.geometry.attributes.skinWeight.array,
      index: skinnedMesh.geometry.index?.array
    };

    // 提取骨骼的层级和变换数据
    const skeletonData = {
      bones: skinnedMesh.skeleton.bones.map(bone => ({
        name: bone.name,
        position: bone.position.toArray(),
        quaternion: bone.quaternion.toArray(),
        scale: bone.scale.toArray(),
        parentIndex: skinnedMesh.skeleton.bones.indexOf(bone.parent)
      })),
      boneInverses: skinnedMesh.skeleton.boneInverses.map(mat => mat.toArray())
    };

    // 提取材质的基础属性（根据你的需求调整）
    const materialData = {
      color: skinnedMesh.material.color.toArray(),
      metalness: skinnedMesh.material.metalness,
      roughness: skinnedMesh.material.roughness
    };

    // 用Transferable Objects传递TypedArray，避免数据拷贝
    const transferables = [
      geometryData.position.buffer,
      geometryData.skinIndex.buffer,
      geometryData.skinWeight.buffer
    ];
    if (geometryData.index) transferables.push(geometryData.index.buffer);

    self.postMessage({
      type: 'success',
      data: { geometryData, skeletonData, materialData }
    }, transferables);
  } catch (err) {
    self.postMessage({ type: 'error', message: err.message });
  }
};

2. 主线程的处理：重建SkinnedMesh

拿到Worker传过来的纯数据后，在主线程重新构建THREE.js的BufferGeometry、Skeleton和SkinnedMesh对象：

// 主线程代码
const worker = new Worker('./model-loader.worker.js');

worker.postMessage({ modelUrl: './your-skinned-model.gltf' });
worker.onmessage = (e) => {
  if (e.data.type === 'error') {
    console.error('模型加载失败:', e.data.message);
    return;
  }
  if (!e.data.data) {
    console.log('模型中没有蒙皮网格');
    return;
  }

  const { geometryData, skeletonData, materialData } = e.data.data;

  // 1. 重建BufferGeometry
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(geometryData.position, 3));
  if (geometryData.uv) {
    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(geometryData.uv, 2));
  }
  geometry.setAttribute('skinIndex', new THREE.Uint16BufferAttribute(geometryData.skinIndex, 4));
  geometry.setAttribute('skinWeight', new THREE.Float32BufferAttribute(geometryData.skinWeight, 4));
  if (geometryData.index) {
    geometry.setIndex(new THREE.Uint32BufferAttribute(geometryData.index, 1));
  }

  // 2. 重建骨骼和骨架
  const bones = skeletonData.bones.map(boneInfo => {
    const bone = new THREE.Bone();
    bone.name = boneInfo.name;
    bone.position.fromArray(boneInfo.position);
    bone.quaternion.fromArray(boneInfo.quaternion);
    bone.scale.fromArray(boneInfo.scale);
    return bone;
  });

  // 绑定骨骼层级关系
  skeletonData.bones.forEach((boneInfo, index) => {
    if (boneInfo.parentIndex !== -1) {
      bones[boneInfo.parentIndex].add(bones[index]);
    }
  });

  // 重建骨骼逆矩阵和骨架
  const boneInverses = skeletonData.boneInverses.map(arr => new THREE.Matrix4().fromArray(arr));
  const skeleton = new THREE.Skeleton(bones, boneInverses);

  // 3. 重建材质和SkinnedMesh
  const material = new THREE.MeshStandardMaterial({
    color: new THREE.Color().fromArray(materialData.color),
    metalness: materialData.metalness,
    roughness: materialData.roughness
  });
  const skinnedMesh = new THREE.SkinnedMesh(geometry, material);
  skinnedMesh.skeleton = skeleton;
  skinnedMesh.bind(skeleton);

  // 4. 添加到场景中
  scene.add(skinnedMesh);
};

额外的小Tips #

• 先简单后复杂：测试时可以先加载一个不带蒙皮的静态模型，验证Worker和主线程的数据传递流程是否正常，再逐步加入蒙皮数据的处理，这样更容易定位问题。
• 不是所有模型都需要Worker：只有大型蒙皮模型或者多个模型同时加载时，这种方案的收益才明显，简单模型直接在主线程加载反而更省心。
• 注意内存管理：Worker里加载完成后要及时清理不必要的变量，避免内存泄漏。

备注：内容来源于stack exchange，提问作者joveem