vue.config.js配置gltf加载器

在Vue.js项目中，可以使用GLTFLoader.js加载gltf模型文件。要在Vue.js项目中使用GLTFLoader.js，需要将GLTFLoader.js添加到Vue项目中，并在vue.config.js文件中配置，以便webpack可以正确加载GLTF文件。

首先，将GLTFLoader.js添加到Vue项目中。可以通过npm安装GLTFLoader.js并将其添加到项目中：

npm install three-gltf-loader

然后，在Vue项目的入口文件（例如main.js）中导入GLTFLoader.js：

import * as THREE from 'three';
import { GLTFLoader } from 'three-gltf-loader';

接下来，在vue.config.js文件中，将GLTFLoader.js添加到webpack配置中。在configureWebpack选项中添加以下内容：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(glb|gltf)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                outputPath: 'assets/models/'
              }
            }
          ]
        }
      ]
    },
    resolve: {
      alias: {
        'three/GLTFLoader': 'three-gltf-loader'
      }
    }
  }
}

这个配置告诉webpack，如果遇到.glb或.gltf文件，使用file-loader来加载文件，并将文件输出到assets/models目录中。它还将three/GLTFLoader别名设置为three-gltf-loader，以便在项目中使用GLTFLoader时引用正确的名称。

现在，可以在Vue项目中使用GLTFLoader.js来加载gltf模型文件。只需导入GLTFLoader并使用它来加载模型文件：

import { GLTFLoader } from 'three-gltf-loader';

let loader = new GLTFLoader();
loader.load('/path/to/model.gltf', (gltf) => {
  // 将模型添加到场景中
  scene.add(gltf.scene);
});

注意，路径应该是相对于public目录的路径。如果model.gltf文件在public目录的assets/models子目录下，则路径应为/assets/models/model.gltf。