Svelte项目中Three.js加载GLTF模型返回404错误该如何解决？

问题原因 #

你遇到的404报错是因为静态资源存放路径和加载路径不符合Svelte项目的资源访问规则：src目录下的文件会被打包工具编译处理，直接在代码里写相对源码文件的路径请求非代码类静态资源，运行时无法被正确识别。

修复步骤 #

• 调整静态资源存放位置：在项目根目录的public文件夹下新建model目录，把你用到的room.gltf文件（如果有配套的.bin文件、纹理贴图文件也一起）移动到public/model/路径下。
• 修改模型加载路径：把Scene.js中加载模型的代码里的相对路径，改成从站点根目录出发的绝对路径，修改后代码如下：

loader.load('/model/room.gltf', function (gltf){
   scene.add(gltf.scene);
}, undefined, function(error){
   console.log("error: ",error);
});

补充注意事项 #

• 如果你的项目后续部署在域名的子路径下，需要先在Svelte对应的打包配置（通常是vite.config.js）中修改base参数为你的子路径前缀，加载路径也要对应加上前缀。
• 确保gltf文件内引用的关联资源（比如纹理、bin文件）的相对路径和你实际存放的路径一致，避免出现加载完gltf后附属资源404的问题。

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