Three.js中GLTF模型加入组后无法移动的解决方法

• 检查GLTF加载时机与添加目标：GLTF模型加载是异步操作，若你在模型加载完成前就尝试将其加入Group，或是加载完成后误将模型直接添加到场景而非目标Group，都会导致移动Group时剑模型无响应。修正示例代码：

  const weaponGroup = new THREE.Group();
  scene.add(weaponGroup);
  
  // 将立方体加入Group
  const cube = new THREE.Mesh(geometry, material);
  weaponGroup.add(cube);
  
  // 加载GLTF模型，确保加载完成后加入目标Group
  const loader = new THREE.GLTFLoader();
  loader.load('剑模型路径.gltf', function(gltf) {
    const sword = gltf.scene;
    weaponGroup.add(sword); // 此处必须添加到weaponGroup，而非scene
    // 可按需调整模型位置、缩放
    sword.position.set(0, 0, 0);
    sword.scale.set(1, 1, 1);
  });
  

• 确认键盘事件的移动对象：确保Z键触发的移动逻辑中，操作的是包含两者的weaponGroup，而非单独的立方体。示例：

  document.addEventListener('keydown', function(e) {
    if (e.key.toLowerCase() === 'z') {
      weaponGroup.position.z += 0.1; // 移动整个Group，而非单独操作cube.position
    }
  });
  

• 验证Group的层级结构：在模型加载完成后，通过控制台打印weaponGroup.children，确认立方体和剑模型都在该数组内。代码示例：

  console.log(weaponGroup.children);
  

  若输出仅包含立方体，说明加载时的模型添加逻辑存在错误。

• 排查模型重复添加问题：检查是否在加载后将剑模型重复添加到场景其他位置，或是克隆模型后未将克隆体加入目标Group，这类操作会导致剑模型脱离Group的控制。

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