Glb model not found with Webpack 5

Questions
1

Unable to achieve glb models be rendered on the canvas.
The error message is default:
GET http://192.168.1.128:8080/assets/models/Parrot.glb 404 (Not Found)

My Webpack config is:

const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

module.exports = {
	entry: path.resolve(__dirname, '../src/script.js'),
	output:
		{
			hashFunction: 'xxhash64',
			filename: 'bundle.[contenthash].js',
			path: path.resolve(__dirname, '../dist')
		},
	devtool: 'source-map',
	plugins:
		[
			new CopyWebpackPlugin({
				patterns: [
					{from: path.resolve(__dirname, '../static')}
				]
			}),
			new HtmlWebpackPlugin({
				template: path.resolve(__dirname, '../src/index.html'),
				minify: true
			}),
			new MiniCSSExtractPlugin()
		],
	module:
		{
			rules:
				[
					// HTML
					{
						test: /\.(html)$/,
						use:
							[
								'html-loader'
							]
					},

					// JS
					{
						test: /\.js$/,
						exclude: /node_modules/,
						use:
							[
								'babel-loader'
							]
					},

					// CSS
					{
						test: /\.css$/,
						use:
							[
								MiniCSSExtractPlugin.loader,
								'css-loader'
							]
					},

					// Images
					{
						test: /\.(jpg|png|gif|svg)$/,
						type: 'asset/resource',
						generator:
							{
								filename: 'assets/images/[hash][ext]'
							}
					},

					// Fonts
					{
						test: /\.(ttf|eot|woff|woff2)$/,
						type: 'asset/resource',
						generator:
							{
								filename: 'assets/fonts/[hash][ext]'
							}
					},
            {
                test: /\.glb/,
                type: 'asset/resource',
            },
				]
		}
}

Model import

async function loadBirds() {
	const loader = new GLTFLoader();

	const [parrotData, flamingoData, storkData] = await Promise.all([
		loader.loadAsync('/assets/models/Parrot.glb'),
		loader.loadAsync('/assets/models/Flamingo.glb'),
		loader.loadAsync('/assets/models/Stork.glb'),
	]);

	console.log('Squaaawk!', parrotData);

	const parrot = setupModel(parrotData);
	parrot.position.set(0, 0, 2.5);

	const flamingo = setupModel(flamingoData);
	flamingo.position.set(7.5, 0, -10);

	const stork = setupModel(storkData);
	stork.position.set(0, -2.5, -10);

	return {
		parrot,
		flamingo,
		stork,
	};

File structure

Screenshot 2023-01-12 at 12.20.16
Screenshot 2023-01-12 at 12.20.16756×1182 59.1 KB

Thank you!

2

/assets does not exist. everything inside /src does not exist, it is virtual. the bundlers job is to recognize what you need from it and construct a single bundle + all assets that you refer to, it copies that into /dist. that string “/assets/…” won’t tell it that you rely on it, and later when it runs there is no such folder (look into /dist, this is what the bundler “sees”.

the only place where you should put static files is /static or /public, depending on the bundler. the path then is just /model.glb, given that model.glb resides in /public.

3

Thanks, objects are there.
Those are still unseen on the canvas, but objects are definitely there.

4

what is there? didn’t you say you got a 404? a 404 means file not found.