Three.js通过CDN引入GLTFLoader报is not a constructor错误如何解决

报错直接原因 #

你使用ES模块方式单独导入了GLTFLoader，该类没有挂载到THREE全局对象上，调用时加了THREE.前缀才会抛出构造函数不存在的错误。

修复步骤 #

1. 把报错行的var loader = new THREE.GLTFLoader();改为var loader = new GLTFLoader();即可解决该报错。
2. 同时需要修复代码中其他关联逻辑问题，避免后续继续报错：
   • GLTFLoader加载模型是异步操作，不能在load回调外访问还未初始化的model变量，纹理赋值逻辑需要挪到回调内部
   • gltf.scene是组对象，不能直接给组对象赋值material属性，需要遍历组内所有Mesh节点修改材质
   • 你后续滚动事件中用到的obj变量没有赋值，加载完成后需要把模型实例赋值给obj

修改后参考代码 #

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('purple.jpg');
texture.flipY = false;

// 去掉THREE.前缀
var loader = new GLTFLoader();
loader.load('scene.gltf', function(gltf) {
  obj = gltf.scene;
  // 遍历所有网格节点设置纹理
  obj.traverse((child) => {
    if (child.isMesh) {
      child.material.map = texture;
      child.material.needsUpdate = true;
    }
  })
  scene.add(obj);
});

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