Estoy tratando de usar un archivo .glb en una aplicación de reacción de fibra tres.

El error dice sobre un archivo GLB:

El análisis del módulo falló: carácter inesperado '' (1: 4) Es posible que necesite un cargador adecuado para manejar este tipo de archivo

Mi archivo usando este archivo:

 export default function Blender() { const gltf = useLoader(GLTFLoader, gumballmachinepink); return ( <primitive object={gltf.scene} position={[0, 0, 0]} scale={10} rotation={[0, 0, 0]} /> ) } useGLTF.preload(gumballmachinepink);

Mi archivo Webpack.config:

 module.exports = { mode: 'production', entry: path.join(__dirname, 'App.tsx'), devtool: "source-map", output: { path: path.join(__dirname, 'dist'), filename: 'own-me-gumball-machine.prod.js', }, module: { rules: [ { test: /\.(ts|js)x?$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: [ "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", ], }, }, }, { test: /\.(glb|gltf)$/, use: [ { loader: 'file-loader', options: { outputPath: 'assets/models/' } } ] }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.(png|jpe?g|gif|woff(2)?|svg)$/i, type: 'asset/resource' }, ] }, resolve: { extensions: [".tsx", ".ts", ".js", ".css"], }, plugins: [ new HtmlWebpackPlugin({ inject: true, template: path.join(__dirname, 'index.html'), }), // new CopyPlugin({ // patterns: [ // { from: "media/favicons/", to: "media/favicons/" }, // ], // }), ] };