在Vue和Vite环境下,你可以将.glb
文件视作一个静态资源,并通过导入获取其URL。这里的关键步骤是告诉Vite应该将.glb
文件视作资源,并能够通过JavaScript导入。下面是详细的步骤:
-
更新Vite配置:你需要告诉Vite将
.glb
文件视作资源。打开你的vite.config.js
文件,并添加以下代码:export default { assetsInclude: ['**/*.glb'] }
-
导入GLB文件:在你的Vue组件或JavaScript文件中,你可以通过
import
语句来导入.glb
文件的URL。import peopleGlb from './model/people.glb';
-
使用GLTFLoader加载GLB文件:现在
peopleGlb
变量包含了.glb
文件的URL,你可以将其传递给Three.js的GLTFLoader来加载模型。import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load(peopleGlb, function (gltf) { // 处理加载的模型 // ... });
通过以上步骤,你可以在Vue和Vite的项目中通过import
语句来导入.glb
文件,并使用Three.js的GLTFLoader来加载和处理模型。这样的处理方式允许你保持代码的清晰结构,并利用现代JavaScript模块系统的优点。