Three.js中缩放GLTF模型无效，仅根节点生效子节点无响应如何解决？

失效原因 #

默认Three.js父节点缩放会自动继承到所有子节点，出现缩放仅根节点生效的问题，90%以上的场景是因为导出的GLTF文件内部子节点自带独立的缩放、位移属性，抵消了根节点的缩放作用；少部分情况出现在带骨骼的蒙皮模型、带动画绑定的模型上。

解决方法 #

方法1：遍历所有节点统一处理缩放 #

直接遍历GLTF场景内的所有节点，统一应用缩放，同时可以重置子节点自带的异常缩放属性：

loader.load('assets/a1-experiment/A1.glb', (gltf) => {
  gltf.scene.traverse((child) => {
    // 可选：先重置子节点原有缩放，避免抵消根节点的缩放设置
    child.scale.set(1,1,1);
  })
  // 再设置根节点缩放，此时所有子节点会正常继承
  gltf.scene.scale.set(0.001, 0.001, 0.001);
  scene.add(gltf.scene);
});

方法2：外层包裹Group后缩放 #

如果内部节点有动画、骨骼绑定不能随便修改原有属性，可以把整个GLTF场景挂载到一个新的Group上，直接缩放外层Group即可全局生效：

import * as THREE from 'three';

loader.load('assets/a1-experiment/A1.glb', (gltf) => {
  const modelWrapper = new THREE.Group();
  modelWrapper.add(gltf.scene);
  // 缩放外层包裹节点，不会影响模型内部原有的变换、动画属性
  modelWrapper.scale.set(0.001, 0.001, 0.001);
  scene.add(modelWrapper);
});

方法3：蒙皮/带骨骼模型专用处理 #

如果是带骨骼的蒙皮模型，需要先强制更新矩阵再应用缩放，避免骨骼变换冲突：

loader.load('assets/a1-experiment/A1.glb', (gltf) => {
  gltf.scene.scale.set(0.001, 0.001, 0.001);
  // 强制更新所有子节点的世界矩阵，确保缩放继承到骨骼
  gltf.scene.updateMatrixWorld(true);
  scene.add(gltf.scene);
});

排查小技巧 #

可以在加载回调里打印console.log(gltf.scene)，展开查看子节点的scale属性，如果初始值不是(1,1,1)，说明导出时自带了缩放属性，优先用方法1重置即可。

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