Three.js使用GLTFLoader无法加载本地glTF文件问题求助

• 浏览器安全策略限制：默认禁止file://协议下的网页读取本地磁盘的任意文件，你直接双击打开本地HTML文件运行时，网页属于file://协议，没有服务端环境支持，自然无法加载本地glTF资源。
• 路径格式不符合前端规范：你使用的Windows本地绝对路径C:\Models\scene.gltf存在两个问题，一是JS字符串里反斜杠\是转义字符，你写的\M、\s会被识别为转义序列，不是正常的路径字符；二是浏览器运行的JS无法直接识别本地磁盘的盘符路径。
• 关联资源缺失：glTF通常不是单文件资源，会关联.bin二进制文件、材质贴图等资源，如果你只单独移动了.gltf文件，关联资源路径不匹配也会加载失败。

1. 在Dreamweaver中创建本地站点，把所有项目文件（HTML、JS、CSS、3D模型资源等）都放到站点根目录下，比如在根目录新建models文件夹，把scene.gltf和它关联的所有.bin、贴图文件都放到这个models文件夹里。
2. 不要直接双击打开HTML文件运行，使用Dreamweaver的「预览」功能启动内置本地服务器打开页面，Dreamweaver会自动生成http://localhost:xxxx格式的本地服务地址，满足浏览器资源加载的安全要求。
3. 修改加载路径为站点内的相对路径，注意统一使用正斜杠：

loader.load('./models/scene.gltf', function ( gltf ) {
  console.log(gltf);
  scene.add( gltf.scene );
}, undefined, function ( error ) {
  console.error( error );
} );

• 如果你使用的是单文件.glb格式的3D资源，也遵循上述路径规则即可。
• 如果调整后仍加载失败，可以先查看浏览器控制台的错误提示，大部分报错都是路径找不到或者关联资源缺失导致的，对应调整即可。

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