Chargement du modèle GLB avec Webpack - Three.js

Question

J'essaie d'utiliser Webpack pour la première fois et j'ai du mal à ajouter mon modèle glb. Mon modèle est correct, utilisé plusieurs fois et placé dans le dossier public. Je ne comprends pas l'erreur de la console, toute aide sera appréciée, merci.

J'utilise trois.js r116 et Firefox. Safari me dit la même erreur, ne peut pas trouver le modèle.

Voici une partie de mon code JS :

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

const loader = new GLTFLoader();
    loader.load('/assets/models/street_car.glb', (gltf) => {
        scene.add(gltf.scene);
    });

Mon webpack.config :

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/scripts/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'dist/main.js',
    },
    performance: {
        hints: false
    },
    plugins: [
        new CopyWebpackPlugin([{ from: '**/*', to: '' }], {
            context: 'src',
            writeToDisk: true,
        }),
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: 9000, 
        historyApiFallback: true
    }
};

Et enfin l'erreur de console :

Answer 1

Je viens de trouver le problème, ajouter ces lignes à webpack.config

module:
    {
        rules:
        [
            {
                test: /\.(glb|gltf)$/,
                use:
                [
                    {
                        loader: 'file-loader',
                        options:
                        {
                            outputPath: 'assets/models/'
                        }
                    }
                ]
            },
        ]
    }

Et pas besoin d'ajouter les actifs dans le dossier public, ils sont dans mon dossier src avec scripts.

Answer 2

Je cherchais quelque chose comme ça mais pour la configuration d'une application Symfony Webpack Encore. @MlleBz votre réponse m'a en fait beaucoup aidé, merci. Donc, sans plus tarder, si vous cherchez à mettre en œuvre une configuration de .glb o .gltf dans une application Symfony / React / ThreeJS, ajoutez ce qui suit à votre fichier webpack.config.js :

// add loader for .glb files (use this with three.js)
    .addLoader({
        test: /\.(glb|gltf)$/,
        loader: 'file-loader'
    })