Three.js项目构建后GLB模型无法访问的问题求助

问题原因 #

开发环境下绝对路径/models/miku_pde.glb能正常指向public/models目录，但构建后如果部署在非域名根目录（比如子路径），绝对路径会直接指向域名根导致找不到文件；另外Vite的静态资源引用推荐使用import.meta.env.BASE_URL适配不同部署场景。

解决方案 #

1. 修改模型路径为动态拼接 #

将硬编码的绝对路径改为用Vite提供的环境变量拼接，确保开发和构建环境路径一致：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

let model;
const loader = new GLTFLoader();
// 使用import.meta.env.BASE_URL拼接路径
const modelPath = `${import.meta.env.BASE_URL}models/miku_pde.glb`;

loader.load(modelPath, (gltf) => {
  model = gltf.scene;
  model.position.y = -15;
  scene.add(model);
});

2. 配置Vite的base路径（部署在子路径时） #

如果项目部署在域名的子路径下（比如https://example.com/my-project/），需要在vite.config.js中添加base配置：

export default {
  base: '/my-project/'
}

此时import.meta.env.BASE_URL会自动替换为/my-project/，确保模型路径正确指向资源位置。

3. 验证构建后的资源 #

执行npx vite build后，检查dist目录下是否存在models/miku_pde.glb文件。如果缺失，确认public目录结构是否为public/models/miku_pde.glb——Vite默认会将public下的所有资源原封不动复制到dist根目录。

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