加载自制Capsule模型调用rotateOnAxis时出现Cannot read properties错误

核心原因 #

Adobe Dimension导出的capsule.obj与three.js官方示例的cube.obj结构存在差异：

• three.js的cube是单个Mesh对象，加载后可直接调用rotateOnAxis方法
• Dimension导出的模型大概率是多层级Group结构，或是你代码中用于旋转的capsule变量未正确指向加载完成的Object3D实例，导致调用方法时触发Cannot read properties of undefined错误

排查与修复步骤 #

1. 确认加载对象的结构 #

在capsule加载完成的回调里打印对象结构，明确层级关系：

objLoader.load('capsule.obj', function (loadedObject) {
  console.log('Capsule 结构:', loadedObject); // 查看控制台输出的对象层级
  scene.add(loadedObject);
  window.capsule = loadedObject; // 临时挂载到全局方便调试
});

如果控制台显示loadedObject是THREE.Group，说明模型是多子对象的集合——Group本身也支持rotateOnAxis，但要确保你操作的是这个Group实例，而非未赋值的变量。

2. 修正旋转逻辑的判空处理 #

避免直接操作未初始化的变量，旋转前先检查对象是否存在：

function animate() {
  requestAnimationFrame(animate);
  
  // cube 正常旋转
  cube.rotateOnAxis(new THREE.Vector3(1, 0, 0), 0.01);
  
  // capsule 旋转前先判空
  if (window.capsule) {
    window.capsule.rotateOnAxis(new THREE.Vector3(1, 0, 0), 0.01);
  }

  renderer.render(scene, camera);
}

3. 优化Dimension导出设置 #

导出OBJ时调整以下选项，减少层级问题：

• 勾选「合并网格」或「导出为单个对象」，避免生成多层空Group
• 禁用「导出隐藏对象」「导出相机/灯光」等无关选项，确保模型数据简洁

额外调试技巧 #

如果旋转Group后效果不符合预期，可以遍历Group找到所有Mesh并单独旋转：

function rotateAllMeshes(group) {
  group.traverse(function(child) {
    if (child.isMesh) {
      child.rotateOnAxis(new THREE.Vector3(1, 0, 0), 0.01);
    }
  });
}

// 在animate中调用
if (window.capsule) {
  rotateAllMeshes(window.capsule);
}

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