Just delving into the world of Webpack for the first time and I'm encountering some difficulties when trying to add my glb model. The model itself is fine, it's been used multiple times and I placed it in the public folder. I'm puzzled by the console error message, any guidance would be greatly appreciated. Thank you.
I'm currently working with three.js r116 and using Firefox. Safari is also giving me a similar error, stating it can't find the model.
Here's a snippet of my JavaScript code :
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);
});
My 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
}
};
And here's the console error I'm getting :