I was following this tutorial to import a GLTF model and keep getting http:localhost:5000/kick.glb 404 (Not Found) Error. If I import it on CodeBox, the animation comes up and everything works fine, but on VS Code, I get the error.
The glb file is in my public folder. Folder Structure
Is there something else that I’m missing?
Webpack:
const path = require("path");
const entryFile = path.resolve(__dirname, "client", "src", "index.js");
const outputDir = path.resolve(__dirname, "client", "dist");
const webpack = require("webpack");
module.exports = {
entry: ["@babel/polyfill", entryFile],
output: {
path: outputDir,
publicPath: "/",
filename: "bundle.js",
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/,
},
{
test: /.(scss|css)$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
],
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
{
loader: "url-loader",
},
],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
historyApiFallback: true,
static: "./client/dist",
hot: true,
proxy: {
"/api": "http://localhost:3000",
"/socket.io/*": {
target: "http://localhost:3000",
ws: true,
},
},
},
};
Kick.js
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/
import React, { useRef } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'
export default function Model({ ...props }) {
const group = useRef()
// const path = path.resolve()
const { nodes, materials, animations } = useGLTF('/kick.glb')
const { actions } = useAnimations(animations, group)
return (
<group ref={group} {...props} dispose={null}>
<group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
<primitive object={nodes.mixamorigHips} />
<skinnedMesh geometry={nodes.Ch03.geometry} material={materials.Ch03_Body} skeleton={nodes.Ch03.skeleton} />
</group>
</group>
)
}
useGLTF.preload('/kick.glb')