Vue JS，GLTF 加载器错误“当前没有配置加载器”答案

【问题标题】：Vue JS , GLTF Loader Error "currently no loaders are configured"Vue JS，GLTF 加载器错误“当前没有配置加载器”
【发布时间】：2020-05-28 15:57:25
【问题描述】：

我正在尝试将 gltf 加载到 vue 项目中。这是我的代码

import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

let scene,camera,renderer;

function init(){

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);

    camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);


    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);


    let loader = new GLTFLoader();

    loader.load(require('../../assets/tshirt/gitF/tshirt.glb'),function(gltf){
        //some code here 
}

init();

我不断收到错误

./src/assets/tshirt/gitF/tshirt.glb 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

我在这里做错了什么？ PS：我对 VUE 和 Three.js 都是新手。我已经在没有框架的情况下尝试了这个确切的代码并且它可以工作。只有在 VUE 中运行代码时才会出现该错误。

【问题讨论】：

标签： javascript vue.js webpack three.js gltf

【解决方案1】：

加载调用中不需要require()，并且函数括号没有正确关闭：

init() {
    //...
    loader.load('../../assets/tshirt/gitF/tshirt.glb',function(gltf){
            //some code here 
    }
}

【讨论】：

我确实尝试过，但仍然得到相同的结果。附言这里的括号是错误的，因为我删除了一些代码来在这里发布。

【解决方案2】：

确保你的 webpack.config.js 文件允许 .glb 文件在资产/资源。这解决了我的问题。

module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /\.(glb)$/i,
                type: 'asset/resource',
            },
        ],
    },
};

您可以在https://webpack.js.org/guides/asset-management/阅读更多内容

【讨论】：